jquery ui autocomplete を使用してコンボボックスを作成すると、奇妙な動作が発生します。スクロールバーをクリックして結果のリストをスクロールし、コンボボックスボタンをクリックして結果を閉じると、結果リストが閉じてから再び開きます。メニューを閉じることを期待しています。
再現手順
- jsfiddle デモを開く
- オートコンプリートに「i」と入力するか、ドロップダウン ボタンをクリックします。
- 垂直スクロールをクリックして結果をスクロールします
- ドロップダウンボタンをクリックします
ボタンを作成するスクリプト
this.button = $("<button type='button'> </button>")
.attr({ "tabIndex": -1, "title": "Show all items" })
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function () {
// when i put breakpoint here, and my focus is not on input,
// then this if steatment is false????
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
CSS (長い結果メニューを強制的にスクロール)
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
入力要素ではなくウィジェット自体にフォーカスが移されたとしても、私の解決策はウィジェットを閉じることでしょうか?
このように動作するようにこのコードを変更する方法はありますか?