Javascript 使用动态添加的元素在jQuery中自动完成

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

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

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

        }
    });

我不能在开始加载页面时加载数据，因为数据太大了。有一个ajax调用来获取过滤后的数据

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

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

        }
    });

我得到的问题是第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
            });

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

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

        }
    });

试试这个

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

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

        }
    });

---

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

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

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

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

        }
    });

$（函数（）{
//每个自动完成的设置
var自动完成选项={
最小长度：3，
来源：功能（请求、响应）{
$.ajax({
键入：“获取”，
url:“getNames.html”，
数据：{name:request.term}，
成功：功能（数据）{
答复（数据）；
}
});
}
};
//动态创建输入并在其上初始化自动完成
函数addInput（）{
变量$input=$（“”{
名称：“搜索”，
“类”：“searchInput”，
最大长度：“20”
});
$input
.附录（“表格#我的表格”）
.focus（）
.自动完成（自动完成选项）；
};
//在第一次输入时初始化自动完成
$（“input.searchInput”）.autocomplete（autocompleteOptions）；
$（“输入#添加按钮”）。单击（添加输入）；
});

---

我在其中添加新输入字段的方法，编写以下代码

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

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

        }
    });

  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中的一些地方，代码下面的所有其他（静态）输入字段都会用到

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

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

        }
    });

   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（）函数的自动完成代码

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

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

        }
    });

---

感谢@Salman和这篇文章给了我一个想法。

我之前用过这个。但问题是，对于页面加载后添加的元素（如动态添加的元素），这将不起作用。它适用于静态元素。您可以为动态元素应用相同的代码。用你的动态元素替换选择器。嘿，非常感谢@Salman。我也这样做了。忘了把我的答案贴在这里了。在添加新输入字段时，我正在执行

自动完成

。再次感谢。@Salman A:我想通过调用PageMethod动态地向json添加数据。结果是数据（用于自动完成功能）。我该怎么办？谢谢。$input未定义

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

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

        }
    });