带有动态添加元素的 jQuery 中的自动完成

Posted 2023-05-08

【中文标题】带有动态添加元素的 jQuery 中的自动完成

【英文标题】：AutoComplete in jQuery with dynamically added elements

【发布时间】：2016-01-29 09:26:50

【问题描述】：

我的要求是当用户在一个输入字段中输入一些字符（最少 3 个）时显示几个选项，这些字符也可能是动态添加的。

我无法在页面加载开始时加载数据，因为数据量很大。有一个 ajax 调用来获取过滤后的数据。

我得到的问题是Expected identifier 在第 2 行的页面加载错误。那么，你能告诉我下面的代码有什么问题吗？

$(document).on('keydown.autocomplete', 'input.searchInput', function()                 
            source: function (request, response)  // Line # 2
            var id = this.element[0].id;

            var val = $("#"+id).val();             
            $.ajax(                     
                    type : 'Get',
                    url: 'getNames.html?name=' + val,
                    success: function(data) 
                        var id = $(this).attr('id');
                        $(this).removeClass('ui-autocomplete-loading'); 
                        response(data);
                    ,error: function(data) 
                          $('#'+id).removeClass('ui-autocomplete-loading');  
                    
                  );
              ,
                minLength: 3
            );

【参考方案1】：

如何使用另一种方法：在创建输入时初始化自动完成：

$(function() 

  // settings for each autocomplete
  var autocompleteOptions = 
    minLength: 3,
    source: function(request, response) 
      $.ajax(
        type: "GET",
        url: "getNames.html",
        data:  name: request.term ,
        success: function(data) 
          response(data);
        
      );
    
  ;

  // dynamically create an input and initialize autocomplete on it
  function addInput() 
    var $input = $("<input>", 
      name: "search",
      "class": "searchInput",
      maxlength: "20"
    );
    $input
      .appendTo("form#myForm")
      .focus()
      .autocomplete(autocompleteOptions);
  ;

  // initialize autocomplete on first input
  $("input.searchInput").autocomplete(autocompleteOptions);
  $("input#addButton").click(addInput);
);

<form id="myForm" name="myForm" method="post">
  <input id="addButton" type="button" value="Add an input" />
  <input name="search" class="searchInput" maxlength="20" />
</form>

jsFiddle with AJAX

【讨论】：

嘿，非常感谢@Salman。我做了同样的方法。忘了在这里发布我的答案。在添加我的新输入字段时，我正在做autocomplete。再次感谢。

@Salman A：我想通过调用 PageMethod 动态地将数据添加到 json。结果是数据（用于自动完成功能）。我怎样才能 ？谢谢。

$input 未定义

【参考方案2】：

我在下面的代码中添加新输入字段的方法。

  function addInput()    
      // Code to append new input filed next to existing one.
       $("table").find('input[id=clientId]:last').autocomplete(
            source: function (request, response) 
                var id = this.element[0].id;

                var val = $("#"+id).val();
                $.ajax(                     
                     type : 'Get',
                     url: 'getName.html?name=' + val,
                     success: function(data) 
                       var id = $(this).attr('id');
                       $(this).removeClass('ui-autocomplete-loading');
                       response(data);
                   ,
                   error: function(data) 
                       $('#'+id).removeClass('ui-autocomplete-loading');  
                   
               );
            ,
            minLength: 3
        ); 

还有一些在其他 js 中将用于代码下面的所有其他（静态）输入字段的地方。

   jQuery("input.searchInput").autocomplete(               
        source: function (request, response) 
                    var id = this.element[0].id;                        
                    var val = $("#"+id).val();
                    $.ajax(                     
                         type : 'Get',
                         url: 'getName.html?name=' + val,
                         success: function(data) 
                           var id = $(this).attr('id');
                           $(this).removeClass('ui-autocomplete-loading');
                           response(data);
                       ,
                       error: function(data) 
                           $('#'+id).removeClass('ui-autocomplete-loading');  
                       
                  );
               ,
          minLength: 3
    );

注意：- 对于动态添加的输入字段中的任何自动完成请求，将调用 addInput() 函数的自动完成代码。

感谢@Salman 和这篇帖子Enabling jQuery Autocomplete on dynamically created input fields 给了我一个想法。

【参考方案3】：

试试这个。

  $("#autocompleteElement").autocomplete(
        source:function (data, response) 

            $ajax(
                url:'your/url?name='+data.term,                 
                success:function(data)
                    response(data);
                
            )

        
    );

此代码基于 jquery UI 自动完成。

【讨论】：

我之前用过这个。但问题是，这不适用于在页面加载后添加的元素，如动态。它适用于静态元素。

您可以为您的动态元素应用相同的代码。用你的动态元素替换选择器。