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

Question

我的要求是当用户在一个输入字段中输入一些字符（最少 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
            });

Answer 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

Answer 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 给了我一个想法。

Answer 3

试试这个。

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

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

        }
    });

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