web-dev-qa-db-ja.com

.on（）を使用してjQuery UIオートコンプリートをバインドするにはどうすればよいですか？

この質問はlive（）メソッドで回答されましたが、live（）メソッドはjQuery 1.7で非推奨になり、.on（）メソッドに置き換えられ、この回答はon（）では機能しません。

以前に回答された場所は次のとおりです。 。live（）を使用してjQueryUIオートコンプリートをバインド

On（）で同じことを行う方法を知っている人はいますか？

構文を次のようなものに変更した場合

$(document).on("keydown.autocomplete",[selector],function(){...});

から

$([selector]).live("keydown.autocomplete",function(){...});

これは一種の動作ですが、内部のオートコンプリートイベントと奇妙な方法で相互作用します。 live（）では、selectイベントを使用してevent.targetにアクセスすると、入力要素のIDが提供されます。 on（）を使用すると、ドロップダウンメニュー「ui-active-menuitem」のIDが表示されます。このようなもの：

$( ".selector" ).autocomplete({
   select: function(event, ui) { 
     console.log(event.target.id);
 }
});

ただし、「open」イベントを使用すると、探しているIDが表示されますが、適切なタイミングではありません（選択後に必要になります）。この時点で、openイベント関数で入力要素のIDを取得し、それを非表示フィールドに格納してから、必要なselectメソッドでアクセスするという回避策を使用しています。

jqueryjquery-ui-autocomplete
19
paul

私が正しく理解していれば、あなたの問題は私が別のトピックで見たものと非常に似ています。私は 私の答え をあなたのケースに適応させます、それがあなたの問題を解決するかどうか見てみましょう：

$(document).on("focus",[selector],function(e) {
    if ( !$(this).data("autocomplete") ) { // If the autocomplete wasn't called yet:
        $(this).autocomplete({             //   call it
            source:['abc','ade','afg']     //     passing some parameters
        });
    }
});

jsFiddle での作業例。イベントを再トリガーする必要があり、キー/マウスイベントでそれを行う方法がわからないため、focusの代わりにkeydownを使用しました。

Update：追加の入力に既存の入力と同じオートコンプリートがある場合は、 clone の使用を検討することもできます。

var count = 0;
$(cloneButton).click(function() {
    var newid = "cloned_" + (count++); // Generates a unique id
    var clone = $(source) // the input with autocomplete your want to clone
        .clone()
        .attr("id",newid) // Must give a new id with clone
        .val("") // Clear the value (optional)
        .appendTo(target);
});

更新されたフィドル を参照してください。このソリューションを簡単にする可能性のあるjQueryテンプレートプラグインもあります（私はまだ使用していないので、経験から話すことはできません）。

22
mgibsonbr

これは、.on（）とオートコンプリートの間の相互作用のいくつかの特殊性のようです。これを実行したい場合：

$(function(){
  $('.search').live('keyup.autocomplete', function(){
    $(this).autocomplete({
      source : 'url.php'
    });
  });
});

これはon（）で機能します：

$(function(){
  $(document).on("keydown.autocomplete",".search",function(e){
    $(this).autocomplete({
      source : 'url.php'
    });
  });
});

On（）コールバック関数のパラメーター（上記のコードではe）を使用して、オートコンプリートが呼び出された要素のevent.target.idにアクセスできます。

違いはon（）であり、内部イベントのevent paramは異なる動作をし、異なる値を保持します。 live（）を使用すると、select関数のevent.target.idは、選択された入力要素のIDを保持します。ただし、on（）を使用すると、selectのevent.target.idはオートコンプリートアイテムのリストのIDを保持します（i-active-menuitem）。 on（）を使用すると、changeおよびopen関数からevent.target.idを使用して入力要素のIDにアクセスできます。

10
paul