Jquery 自动完成更改源
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18441716/
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
Jquery autocomplete change source
提问by Ludvik Ctrnacty
I have Fiddle here
And I need availabletags1 as source if it's choice1 radio button is chosen and availabletags2 if choice2 radio button is chosen. And I need to change this dynamically by actual user choice.
如果选择了choice1单选按钮，我需要availabletags1作为源，如果选择了choice2单选按钮，则需要availabletags2。我需要通过实际的用户选择动态地改变它。
CODE:
代码：
var availableTags1 = [
"ActionScript",
"AppleScript",
"Asp"
];
var availableTags2 = [
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#autocomplete" ).autocomplete({
source: availableTags1
});
$('input[name="choice"]').click(function(){
if(this.checked){
if(this.value == "1"){
$( "#autocomplete" ).autocomplete('option', 'source', availableTags1)
} else {
$( "#autocomplete" ).autocomplete('option', 'source', availableTags2)
}
回答by Arun P Johny
回答by r3wt
For anyone reading this in 2016 and beyond, there is a better way using the request/responsepattern. jQuery autocomplete has a sourceoption which accepts a function which will receive two arguments when invoked by the plugin: requestand response. requestis an object containing information about the autocomplete component, namely request.termwhich is the value of the input field. responseis a function, accepting a single parameter, the returned data response(data). as you can see in my example below, you can use this option to facilitate an ajax request. you can simply pass the requestfunction as the success callback to jQuery $.ajaxmethods and it will work as intended. you could also do other cool stuff using this pattern, like searching in memory if you have already fetched and cached some data, making subsequent searches more real time for users.
对于在 2016 年及以后阅读本文的任何人来说，使用该request/response模式有更好的方法。jQuery 自动完成有一个source选项，它接受一个函数，当插件调用时，该函数将接收两个参数：request和response。request是一个包含有关自动完成组件的信息的对象，即request.term输入字段的值。response是一个函数，接受单个参数，即返回的数据response(data)。正如您在下面的示例中所看到的，您可以使用此选项来促进 ajax 请求。您可以简单地将该request函数作为成功回调传递给 jQuery$.ajax方法，它将按预期工作。你还可以使用这种模式做其他很酷的事情，比如在内存中搜索（如果你已经获取并缓存了一些数据），使用户的后续搜索更加实时。
$('#term-search').autocomplete({
source: function(request, response) {
$.ajax({
url: $('#api-endpoint').val(),//whether you are using radios, checkboxes, or selects, you can change the endpoint at runtime automatically
dataType: "json",
data: {
query : request.term,//the value of the input is here
language : $('#lang-type').val(), //you can even add extra parameters
token : $('#csrf_token').val()
},
success: response //response is a callable accepting data parameter. no reason to wrap in anonymous function.
});
},
minLength: 1,
cacheLength: 0,
select: function(event, ui) {} //do something with the selected option. refer to jquery ui autocomplete docs for more info
});
回答by mEnE
In my case i wanted to change the source data inside sourcefunction and mutate them before the responce(). So i just put a global variable (to the global execution context) in order to change the value of the global var in second time...
在我的情况下，我想更改source函数内部的源数据并在响应（）之前改变它们。所以我只是放置了一个全局变量（到全局执行上下文），以便在第二次更改全局变量的值......
Example:
例子：
....
var jsonData = null;
....
// maybe inside a listener the code below
if (cond1) {
jsonData = ['item1','item2'];
else {
jsonData = ['anotherItem1', 'anotherItem2'];
}
....
$("#query").autocomplete({
source: function(request, response) {
if (request.term.length > 2) {
var matches = $.map(jsonData, function(item) {
// code code code ...
if (maybeSomeCondition) {
return item;
}
});
response(matches);
}
},
//
