2

要件：

ユーザーがアイテムを選択し、選択した値で表示フィールドと非表示フィールドを設定できるjQueryオートコンプリート要素が必要です。ただし、入力フィールドがユーザーによってフォーカスを受け取ったときに、フィールドと非表示フィールドをクリアすることも必要です。

問題：

私が直面している問題は、ユーザーがアイテムを選択すると、jQueryがonSelect関数を実行し、フォーカスを入力フィールドに再度送信して、focus（）イベントを発生させる（したがって、選択をクリアする）ようです。

問題のあるブラウザ：

IE8、Chromeで動作します。他の人を試しませんでした。

修正の試み：

  • select() 関数内の別の要素にフォーカスを設定してみました。それはその要素に焦点を合わせましたが、入力フィールドに焦点を合わせた後でのみです
  • とselect（）メソッドの両方event.preventDefault()を試しました。event.stopPropagation()動作しませんでした。
  • ぼかしも機能しませんでした。

回避策：

クリアをフォーカスではなくクリックに変更できると思いますが、これは私が望んでいることではありません。

同様のstackoverflowスレッド：

jqueryオートコンプリートは提案後にフォーカスを削除します

コード： これが私のコードです：

$(function () {
    $("#autosuggest").autocomplete({
        source: "my server path",
        minLength: 3,
        select: function (event, ui) {
            if (ui.item) {
                $("#autosuggest").val(ui.item.value);                    
                $("#hidden").val(ui.item.id);                                                                                
            }
        }
    });
    $("#autosuggest").focus(function () {
        $("#hidden").val("");
        this.value = "";
    });

});
4

3 に答える 3

2

問題は、オートコンプリートの提案をクリックすると、フォーカスがそのドロップダウンメニューに移り、すぐに入力に戻ります。下矢印ボタンを使用してオートコンプリートの提案を選択した場合でも、この問題が発生しますか？そうでない場合は、これが問題です。

これを修正するために私が見ることができる唯一の方法は、結局それをフォーカスイベントにすることではありませんが、クリックイベントにしたくない理由はわかっていると思います。フィールドへのタブ移動もキャプチャする必要があります。

解決策：クリックハンドラーにし、キーがタブの場合にクリックハンドラーハンドラーを実行する「keyup」ハンドラーを追加します（矢印などは引き続き使用できます）。

于 2012-09-14T16:22:26.003 に答える