web-dev-qa-db-ja.com

jQuery AutoCompleteトリガー変更イベント

JQuery UIのオートコンプリート変更イベントハンドラーをプログラムでトリガーするにはどうすればよいですか？

フックアップ

$("#CompanyList").autocomplete({ 
    source: context.companies, 
    change: handleCompanyChanged 
});

これまでのその他の試行

$("#CompanyList").change();
$("#CompanyList").trigger("change");
$("#CompanyList").triggerHandler("change");

他の回答に基づいて、should動作するはずです：

コードでjQuery変更イベントをトリガーする方法

jQueryオートコンプリートおよび変更時の問題

JQueryオートコンプリートヘルプ

ブラウザーを介してオートコンプリート入力を手動で操作すると、変更イベントが期待どおりに発生します。ただし、場合によってはプログラムで変更イベントをトリガーしたいと思います。

私は何が欠けていますか？

jquery-uiautocomplete
48
Chris Baxter

どうぞ。少し面倒ですが、動作します。

$(function () {  
  var companyList = $("#CompanyList").autocomplete({ 
      change: function() {
          alert('changed');
      }
   });
   companyList.autocomplete('option','change').call(companyList);
});
41
John Kalberer

これもうまくいく

$("#CompanyList").autocomplete({
  source : yourSource,
  change : yourChangeHandler
})

// deprecated
//$("#CompanyList").data("autocomplete")._trigger("change")
// use this now
$("#CompanyList").data("ui-autocomplete")._trigger("change")
20
lordvlad

代わりにselectイベントを使用することをお勧めします。ウィルが言ったように、変更イベントはキーダウンにバインドされています。したがって、選択の変更を聞きたい場合は、そのようなselectを使用します。

$("#yourcomponent").autocomplete({  
    select: function(event, ui) {
        console.log(ui);
    }
});
18
user1484668

これらはオートコンプリートソースのキーダウンにバインドされているため、キーダウンをトリガーすると更新されます。

$("#CompanyList").trigger('keydown');

フォームフィールドがフォーカスを失ったときにのみDOMレベルでトリガーされるため、「変更」イベントにバインドされません。オートコンプリートは「失われたフォーカス」よりも速く応答する必要があるため、キーイベントにバインドする必要があります。

これを行う：

companyList.autocomplete('option','change').call(companyList);

ユーザーが以前あった正確なオプションを再入力すると、バグが発生します。

13
Will Shaver

このトピックを参照している他のユーザーにとって、比較的クリーンなソリューションを次に示します。

// run when eventlistener is triggered
$("#CompanyList").on( "autocompletechange", function(event,ui) {
   // post value to console for validation
   console.log($(this).val());
});

api.jqueryui.com/autocomplete/ ごとに、これは関数をeventlistenerにバインドします。ユーザーがオートコンプリートリストから値を選択したときと、ユーザーが値を手動で入力したときにトリガーされます。フィールドがフォーカスを失うと、トリガーが起動します。

10
Skyhawk637

bindで利用できるようにするには、イベントを初期化オブジェクトのプロパティとして提供するのではなく、手動でtriggerする必要があります。

$("#CompanyList").autocomplete({ 
    source: context.companies
}).bind( 'autocompletechange', handleCompanyChanged );

それから

$("#CompanyList").trigger("autocompletechange");

これは少しの回避策ですが、ライブラリのセマンティックの均一性を改善する回避策に賛成です！

3
Potatoswatter

最も単純で最も堅牢な方法は、内部の._trigger（）を使用して自動補完変更イベントを起動することです。

$("#CompanyList").autocomplete({
  source : yourSource,
  change : yourChangeHandler
})

$("#CompanyList").data("ui-autocomplete")._trigger("change");

JQuery UI 1.9は.data（ "autocomplete"）から.data（ "ui-autocomplete"）に変更されました。 1.9と1.10で実際に機能する.data（ "uiAutocomplete"）を使用している人もいますが、公式の推奨形式は "ui-autocomplete"です。データキーのjQuery UIネームスペースについては、 http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys を参照してください。

3
Chris Kinsella

Autocomplete.changeイベントを呼び出すプログラムによるトリガーは、ソース選択要素の名前空間トリガーを介して行われます。

$("#CompanyList").trigger("blur.autocomplete");

Jquery UIのバージョン1.8内。

.bind( "blur.autocomplete", function( event ) {
    if ( self.options.disabled ) {
        return;
    }

    clearTimeout( self.searching );
    // clicks on the menu (or a button to trigger a search) will cause a blur event
    self.closing = setTimeout(function() {
        self.close( event );
        self._change( event );
    }, 150 );
});
3
Peter O Brien

私は同じことをしようとしていましたが、オートコンプリートの変数を維持することなく。この呼び出しの変更ハンドラーをプログラムでselectイベントについて説明しますが、入力の実際の値について心配するだけです。

$("#CompanyList").autocomplete({ 
    source: context.companies, 
    change: handleCompanyChanged,
    select: function(event,ui){
        $("#CompanyList").trigger('blur');
        $("#CompanyList").val(ui.item.value);
        handleCompanyChanged();
    }
});
2
Perazzo

次のように、キー入力イベントを検索入力にバインドするだけでうまくいきます：

... Instantiate your autofill here...

    $("#CompanyList").bind("keypress", function(){
    if (nowDoing==1) {
        nowDoing = 0;
        $('#form_459174').clearForm();
    }        
});
1
jdisla

前のソリューションとは別のソリューション：

//With trigger
$("#CompanyList").trigger("keydown");

//With the autocomplete API
$("#CompanyList").autocomplete("search");

jQuery UI Autocomplete API

https://jsfiddle.net/mwneepop/

0
Kaymaz

この投稿はかなり古いですが、2016年にここに来ましたの人向けです。ここでの例はどれもうまくいきませんでした。 keyupの代わりにautocompletechangeを使用してジョブを実行しました。 jquery-ui 10.4を使用

$("#CompanyList").on("keyup", function (event, ui) {
    console.log($(this).val());
});

この助けを願っています！

0
Merlin
$('#search').autocomplete( { source: items } );
$('#search:focus').autocomplete('search', $('#search').val() );

これは私のために働いた唯一のもののようです。

0
RootBit0001