web-dev-qa-db-ja.com

jQuery UIオートコンプリート：前の検索用語をクリア

JQuery UIオートコンプリートウィジェットのkeydownイベントでは、デフォルトのcaseステートメントに次のコードが含まれています。

default:
    // keypress is triggered before the input value is changed
    clearTimeout( self.searching );
    self.searching = setTimeout(function() {
        // only search if the value has changed
        if ( self.term != self.element.val() ) {
            self.selectedItem = null;
            self.search( null, event );
        }
    }, self.options.delay );
    break;

上記のコードの6行目から、ユーザーが同じ値を2回入力すると、実行が妨げられることがわかります。これはほとんどの場合理にかなっていますが、私のシナリオでは問題を引き起こしています。

上部に検索入力がある固定ヘッダーを持つajaxアプリケーションを構築しています。ユーザーは検索ボックスに好きなものを入力でき、divがポップアップしてクエリに一致する検索結果が表示されます。ユーザーが「abc」と入力して結果をクリックすると、ajaxを介して対応するページが読み込まれ、検索ボックスがクリアされます。問題は、ユーザーが「abc」を再度入力した場合、入力した内容が最後に検索した内容と一致するため、検索メソッドが起動されないことです。

ユーザーが検索結果をクリックしたときにウィジェット内に保存されているself.term値をクリアする方法はありますか？または、オートコンプリートウィジェットの独自のバージョンを作成せずに問題を解決する別の方法はありますか？

ありがとう

javascriptjqueryjquery-uiautocomplete
18
Nick Olsen

次の手順を実行すると、前の検索語がリセットされます。

 $('#AutocompleteElementID').data().autocomplete.term = null;

アイテムが選択されたときに次のことを行うと、前の検索語がクリアされ、ウィジェットが同じ値を再度入力した場合にウィジェットが検索を実行するようになります。

24
Nick Olsen

残念ながら、

$(this).data().autocomplete.term = null;

入力フィールドをクリアしません。これを行うには、次のように機能します。

close: function(event, ui)  {
      // Close event fires when selection options closes
      $('input')[0].value = ""; // Clear the input field 
      }
3
Serj

オートコンプリート関数がselfを返す場合、オートコンプリート要素に対して呼び出すことができるはずです

$yourAutoCompleteElement.term = null;

あなたがそれをクリアしたいとき。

1
Evan

これはDID私には機能しません：

$(this).data().autocomplete.term = null;

ただし、これはDID jQuery UIで機能します-v1.10.2：

$(this).data().term = null;
1
Hayden

試してみてください ：

$("#AutocompleteElementID").autocomplete("instance").term = null;

それがあなたのために働くかどうか私に知らせてください

1
Apolo

APIは、jQuery/jQueryUIの最新バージョンで変更されました。

ウィジェットインスタンスのプロパティにアクセスする正しい方法は次のとおりです。

$("#AutocompleteElementID").autocomplete("instance").term = null;

コード例： http://jsfiddle.net/altano/sdpL17z5/

JQuery UI1.11.4およびjQuery2.2.3での動作を確認

0
Alan
            close:          function(event, ui)
                                {
                                // Close event fires when selection options closes

                                $(this).data().autocomplete.term = null; // Clear the cached search term, make every search new
                                },
0
james burt

テキストフィールドをクリアした後、空の文字列を使用してjquery uiオートコンプリート「search」メソッドを呼び出すことにより、前の検索をリセットできます。

$('#AutocompleteElementID').autocomplete( "search", "" );

デフォルトでは、アイテムが表示される前に満たす必要のある最小検索長があるため、すべての結果を表示せずに検索を効果的にクリアします。

http://api.jqueryui.com/autocomplete/#method-search

検索方法は時間の経過とともに変化していないため、これはこの状況を処理するための安定した方法であるはずです。

0
Trevor