jQuery自动完成更改源答案

【问题标题】：Jquery autocomplete change sourcejQuery自动完成更改源
【发布时间】：2013-08-28 19:12:39
【问题描述】：

如果选择了choice1单选按钮，我需要availabletags1作为源，如果选择choice2单选按钮，我需要availabletags2作为源。我需要通过实际的用户选择来动态更改它。

代码：

 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)
    }

【问题讨论】：

是 availabletags1 和 availabletags2 数组
还有choice1 和choice2是什么
对不起，我在 jsfiddle 上发布了错误的链接，现在应该可以了。

标签： jquery autocomplete jquery-autocomplete jquery-ui-autocomplete

【解决方案1】：

试试

$('input[name="choice"]').click(function(){
    if(this.checked){
        if(this.value == "1"){
            $( "#autocomplete" ).autocomplete('option', 'source', availableTags1)
        } else {
            $( "#autocomplete" ).autocomplete('option', 'source', availableTags2)
        }
    }
})

演示：Fiddle

【讨论】：

很好，它有效。现在我只需要将您的解决方案与这个http://jsfiddle.net/7RL4p/11/ 合并，我仍然无法让它工作。
太棒了，谢谢。你知道如何通过“键入的字母”添加搜索 - 我的意思是 - 如果用户现在输入“c”（来自 availableTags1） - 它显示 javascript，但我不想显示任何内容，因为没有任何内容以 c 开头。等等（如果用户类型（来自 availableTags1）Sc - 它应该显示 Scala、Scheme；如果 Sca - 现在只有 Scala）。我希望我写的可以理解。而且 - 是否可以设置最大显示值数量？谢谢
有关它的文档链接：api.jqueryui.com/autocomplete/#method-option

【解决方案2】：

对于在 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
});

【讨论】：

太棒了！

【解决方案3】：

在我的例子中，我想更改 source 函数中的源数据，并在 response() 之前改变它们。所以我只是放了一个全局变量（到全局执行上下文中），以便在第二次更改全局变量的值......

例子：

....

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);
    }
  },
//

【讨论】：