ソースにデータ属性を使用したオートコンプリート？

Question

私のオートコンプリートのソースにデータ属性を使用できますか？

例えば

HTML

<input type="text" class="autocomplete" data-source="/search.php" /> 

Javascriptを

$(".autocomplete").autocomplete({ 
     source : $(this).data('source'), 
     minLength:1, 
     select: function(event, ui) { 
      console.log(ui.item ? 
       "Selected: " + ui.item.value + " aka " + ui.item.id : 
       "Nothing selected, input was " + this.value); 
     } 
    }); 

私はそれを試してみましたが、それはいつも私にエラーを与えます。 私のコードで何が問題になっていますか？

Uncaught TypeError: Property 'source' of object #<Object> is not a function

this

Answer 1

がここに修正

$('.autocomplete').keypress(function(){ 
    $(this).autocomplete({ 
     source: $(this).data('source'), 
     minLength: 1, 
     select: function(event, ui) { 
      console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value); 
     } 
    }); 
}); 

だ、それは現在の要素を取得するように、私は、キー押下機能を追加しました。

Answer 2

ポインタが.autocomplete要素を参照していない - thisのみのjQueryによって実行コールバックの内部に選択された要素と等しいです。

$(".autocomplete") 
    .autocomplete({ 
     minLength:1, 
     select: function(event, ui) { 
      console.log(ui.item ? 
       "Selected: " + ui.item.value + " aka " + ui.item.id : 
       "Nothing selected, input was " + this.value); 
     } 
    }) 
    .each(function() { // Goes through `.autocomplete` elements and sets source 
     $(this).autocomplete("option", "source", $(this).data('source')); 
    }) 
; 

Answer 3

ソースがURLの場合、すべてのオートコンプリートキーストロークでリモートリクエストがトリガーされます。データを「プリフェッチ」する（JSONの有効な配列を返すようにしてください）ことを防ぐためにできることは何ですか？そして、戻りデータをオートコンプリートのソースとして追加してください。そうすれば、データは一度だけ取り出され、オートコンプリートはそのデータを参照します。

jQueryオートコンプリートにはすでにフィルタリング機能があります。あなたはアイテムの完全なリストを必要とし、あなたのためにそれをフィルタリングします。

//get all input boxes with class "autocomplete" 
$('.autocomplete').each(function(){ 

    //reference input and get it's url 
    var input = $(this); 
    var url = input.data('source'); 

    //get list array only ONCE for each input using their specified urls 
    $.get(url, function(data) { 

     //when request is received, add autocomplete using the returned data 
     input.autocomplete({ 
      source: data, 
      minLength: 1, 
      select: function(event, ui) { 
       console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value); 
      } 
     }); 
    }); 
}); 

Answer 4

ソースでは、これは良い解決策ではありません入力

$(".autocomplete").autocomplete({ 
    source : this.element.attr('data-source'), 
    minLength:1, 
    select: function(event, ui) { 
    console.log(ui.item ? 
      "Selected: " + ui.item.value + " aka " + ui.item.id : 
      "Nothing selected, input was " + this.value); 
    } 
});