4

「オンフォーカス」で検索を開始し、ユーザーが何も入力していなくても、ユーザーが検索フィールドをクリックするとオプションリストを表示するオートコンプリート付きのフォームがあります。

問題は、オートコンプリートでは、キーボード（下矢印の後にタブ/リターンまたはダブルクリック）のいずれかでオプションを選択する必要があることです。私が最初に考えたのは、シングルクリックでフォーカスが検索フィールドに残り、オートコンプリートが表示されたままになるということでした。ただし、検索フィールドは2回目のクリック後もフォーカスされたままですが、オートコンプリートは2回目のクリック後に消えます。

何か案は？

<script>
$(document).ready(function() {

    var autocomplete_focus = function(){           
        if ($(this).val().length == 0) {
            $(this).autocomplete("search", "%");
        }
    }   

    $( ".autocomplete" ).autocomplete({
            source: "../../db/autocomplete_list.php",
            minLength: 0
    });

    $( ".autocomplete" ).focus(autocomplete_focus);

});
</script>

以前、同様の質問がここに投稿されていることを認識しています。しかし、提案された解決策は私にはうまくいきません。

4

3 に答える 3

5

これが許容できる解決策であるかどうかはわかりませんが、これを行う1つの方法はinput、フォーカスされた値を入力することです。これにより、メニューが2回表示されるのを防ぎます。

/* snip: */
focus: function (event, ui) {
    this.value = ui.item.value;
},

次に例を示します：http： //jsfiddle.net/wxQf7/

focusイベントハンドラーを削除して、質問の症状を確認してください。

于 2011-11-21T03:07:41.960 に答える
2

この方法：

$( ".autocomplete" ).autocomplete({
        source: "../../db/autocomplete_list.php",
        minLength: 0
}).focus(function(){            
        $(this).trigger('keydown.autocomplete');
});

私のために働きます。

ソース：

フォーカスイベントでjqueryuiオートコンプリートリストを表示する

于 2011-11-21T02:27:55.747 に答える
0

これを試して。このコードは、問題のあるkeydown.autocompleteを実際に削除します。代わりに、テキストフィールドにフォーカスするたびに検索します。

$( ".autocomplete" ).autocomplete({
    source: "../../db/autocomplete_list.php",
    minLength: 0
}).focus(function(){ 
    $(this).data("autocomplete").search($(this).val());
}

ただし、エントリを選択するとすぐにドロップダウンを非表示にする場合は、この行を追加します

$( ".autocomplete" ).autocomplete({
    source: "../../db/autocomplete_list.php",
    minLength: 0
}).focus(function(){

    **if ($(this).autocomplete("widget").is(":visible"))
       return;**
    $(this).data("autocomplete").search($(this).val());
}

マウスクリックの場合にコントロールがフォーカスを取り戻すとき、ドロップリストがすでに表示されている場合は、フォーカス全体を表示しません。それがこのコードが行うことです

于 2012-09-04T11:07:52.123 に答える