web-dev-qa-db-ja.com

jqueryオートコンプリートソースの変更

私はここでフィドルを持っています

そして、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)
    }
jqueryautocompletejquery-autocompletejquery-ui-autocomplete
15
Ludvik Ctrnacty

試す

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

デモ： フィドル

27
Arun P Johny

2016年以降にこれを読む人には、_request/response_パターンを使用するより良い方法があります。 jQueryオートコンプリートには、プラグインによって呼び出されたときに2つの引数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
});
_
20
r3wt

私の場合、source関数内のソースデータを変更し、responce（）の前にそれらを変更したいと思いました。だから私は2回目にグローバル変数の値を変更するために（グローバル実行コンテキストに）グローバル変数を置くだけです...

例：

....

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