web-dev-qa-db-ja.com

jQuery UIオートコンプリート-Enterキーを押した後にリストを非表示にする

入力があります。 Jquery UIオートコンプリートを使用して、ユーザーに提案を提案します。自分のリストにある3つのアイテム（item1、item2、item3）をイメージ化します。私が探しているのは、ユーザーがEnterキーを押したときに閉じられるリストです。たとえば、ユーザーが「it」のみを入力すると、3つの要素すべてが表示されます。その場合、彼がEnterキーを押した場合、リストを閉じてください。私はその解決策を考え出すことができません。誰かが助けてくれることを願っています。乾杯。マーク.

http://jsfiddle.net/vXMDR/

私のhtml：

<input id="search" type="input" />​

私のjs：

$(function() {

    var availableTags = [
            "item1","item2","item3"
        ];

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
        });
});​
jqueryjquery-ui-autocomplete
20
Marc
$(function() {

    var availableTags = [
            "item1","item2","item3"
        ];

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
    }).keyup(function (e) {
        if(e.which === 13) {
            $(".ui-menu-item").hide();
        }            
    });
});​

http://jsfiddle.net/vXMDR/2/

24
karim79

これが解決策です： http://jsfiddle.net/vXMDR/3/

ご不明な点がありましたらお知らせください。

魔法はオートコンプリートのクローズメソッドをキープレスにバインドすることです

_ $("#search").keypress(function(e){ 
    if (!e) e = window.event;   
    if (e.keyCode == '13'){
      $('#search').autocomplete('close');
      return false;
    }
  });
_

[〜＃〜]更新[〜＃〜]

$("#search").keypress(function(e){は、＃search要素のキープレスを指定された関数にバインドし、eventオブジェクトを渡します。これを$("#search").on('keypress', function(e) {...と書くこともできます

if (!e) e = window.event;は、有効なイベントが渡されなかった場合に、eを現在のwindow.eventオブジェクトに設定することを保証します。

最後に、if (e.keyCode == '13'){は、イベントのキーコード値が「Enter」キーと等しいことをテストします。有効なキーコードのリストについては、 ここを参照 です。

ここにオートコンプリートのクローズメソッドのドキュメントがあります- http://docs.jquery.com/UI/Autocomplete#method-close

24
shanabus

コールバックによる遅延時間を考慮して、shanabusソリューションをさらに変更しました。

http://jsfiddle.net/vXMDR/46/

これは、オートコンプリートをブール値として表示するかどうかを保存する簡単なハックです。 （私はsetTimeOutを使用して、待機があるシナリオを作成しています。これは問題のシナリオであり、解決策ではありません。）

shouldComplete = true;

$("#search").autocomplete({
    source:function (request, response) {            
        setTimeout(
            function() {
                response(shouldComplete ? availableTags : null);
            },
            2000);
    }        
    ,
    minLength: 0
    });

次に、Enterボタンを押すと、フラグがfalseに設定されます。他のキーはフラグを再びアクティブにします。

$("#search").keypress(function(e){
    if (!e) e = window.event;   
    if (e.keyCode == '13'){
      $('#search').autocomplete('close');
        shouldComplete = false;
      return false;
    }
        else
        {
            shouldComplete = true;
        }
  });

よりエレガントにこれを行うことは可能ですが、これにより、ドロップダウンが後で表示される可能性があるという問題が解決されます。

0
Martin Capodici