Jquery自动完成更改源

Question

我这里有小提琴

如果选择了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)
    }

Answer 1

尝试

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

演示:小提琴

Answer 2

对于2016年及以后阅读此内容的人来说,使用该request/response模式有更好的方法.jQuery autocomplete有一个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
});