javascript 使用动态添加的元素在 jQuery 中自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33410824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AutoComplete in jQuery with dynamically added elements
提问by Jaikrat
My requirement is to show few options when user input some characters (minimum 3) in one of input field which might be added dynamically too.
我的要求是当用户在可能动态添加的输入字段之一中输入一些字符（最少 3 个）时显示几个选项。
I can not load data at page loading at beginning because data is huge. There is an ajax call to get that filtered data.
我无法在页面加载时加载数据，因为数据很大。有一个 ajax 调用来获取过滤后的数据。
The issue what I am getting is Expected identifiererror on page loading at line# 2. So, could you please tell what is wrong with the below code?
我得到的问题是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
});
回答by Salman A
How about using another approach: initialize the autocomplete when you create the input:
使用另一种方法如何：在创建输入时初始化自动完成：
$(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>
回答by Jaikrat
The method where I am adding new input field there writing below code.
我在那里添加新输入字段的方法写在下面的代码中。
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
});
}
And some where in other js which will be used to all other (static) input fields below code is used.
还有一些在其他 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
});
Note :- For any autocomplete requests in dynamically added input fields, AutoComplete code of addInput() function will be called.
注意：- 对于动态添加的输入字段中的任何自动完成请求，将调用 addInput() 函数的自动完成代码。
Thanks to @Salman and this post Enabling jQuery Autocomplete on dynamically created input fieldsto give me an idea.
感谢@Salman 和这篇文章在动态创建的输入字段上启用 jQuery 自动完成给我一个想法。
回答by Santanu Kumar
Try this.
试试这个。
$("#autocompleteElement").autocomplete({
source:function (data, response) {
$ajax({
url:'your/url?name='+data.term,
success:function(data){
response(data);
}
})
}
});
This code based on jquery UI autocomplete.
此代码基于 jquery UI 自动完成。
