javascript - Jquery UI オートコンプリートコンボボックスボタンクリックイベント

Question

jquery ui autocomplete を使用してコンボボックスを作成すると、奇妙な動作が発生します。スクロールバーをクリックして結果のリストをスクロールし、コンボボックスボタンをクリックして結果を閉じると、結果リストが閉じてから再び開きます。メニューを閉じることを期待しています。

再現手順

jsfiddle デモを開く
オートコンプリートに「i」と入力するか、ドロップダウンボタンをクリックします。
垂直スクロールをクリックして結果をスクロールします
ドロップダウンボタンをクリックします

ボタンを作成するスクリプト

 this.button = $("<button type='button'>&nbsp;</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;
}

入力要素ではなくウィジェット自体にフォーカスが移されたとしても、私の解決策はウィジェットを閉じることでしょうか?

このように動作するようにこのコードを変更する方法はありますか?

score 5 · Accepted Answer

automplete ウィジェットのさまざまなクリックイベントとマウスイベントの問題に基づいて、次のように思いつきました: jsFiddle example .

jQuery:

var input = $('#txtComplete');

var data = [];
var isOpen = false;

function _init() {
    for (var idx = 0; idx <= 100; idx++) {
        data.push('item: ' + idx);
    };
    input.autocomplete({
        source: data,
        minLength: 0,
        open: function(event, ui) {
            isOpen = true;
        },
        select: function(event, ui) {
            isOpen = false;
        }
    });
}

function afterInit() {
    var button = $("<button type='button'>&nbsp;</button>").attr("tabIndex", -1).attr("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(event) {
        input.focus();
        if (isOpen) {
            input.autocomplete("close");
            isOpen = false;
        } else {
            input.autocomplete("search", "");
            event.stopImmediatePropagation();
        }
    });
}
$(window).click(function() {
    input.autocomplete("close");
    isOpen = false;
});
$(function() {
    _init();
    afterInit();
});

score 3 · Accepted Answer

問題は、jqueryuiオートコンプリートの回避策が原因です。特定の条件下でメニューを閉じるためのマウスダウンイベント設定があります。条件の1つでは、マウスダウンを発生させたアイテムがオートコンプリートウィジェットの一部であるかどうかを確認します。そうでない場合は、メニューを閉じます。コンボボックスの動作に取り組んでおり、ボタンはオートコンプリートウィジェットの一部ではないため、このイベントが原因でボタンをクリックするとメニューが閉じます。

githubのオートコンプリートソースの205行目から問題が発生している理由を確認できます。コンボボックスのデモにもこのバグがあるため、jqueryuiフォーラムで問題を提起する価値はあります。

アップデート

この置換イベントは、jquery-ui1.8.18に基づいています。このイベントは変更されており、また変更される可能性が非常に高いです。このルートを使用する場合は、リリースごとにこのコードを手動で更新する必要がある場合があります。

mousedownオートコンプリートを作成した後に次のコマンドを実行することで、コンボボタンがクリックされた場合に、メニューを閉じないようにイベントにパッチを適用できます（ jsfiddleデモ）。

var input = $('#combotextbox').autocomplete(/*options*/);
input.data('autocomplete').menu.element.unbind('mousedown').mousedown(function(event) {
        var self = input.data('autocomplete');
        event.preventDefault();
        // clicking on the scrollbar causes focus to shift to the body
        // but we can't detect a mouseup or a click immediately afterward
        // so we have to track the next mousedown and close the menu if
        // the user clicks somewhere outside of the autocomplete
        var menuElement = self.menu.element[0];
        if (!$(event.target).closest(".ui-menu-item").length) {
            setTimeout(function() {
                $(document).one('mousedown', function(event) {
                    var t = $(event.target);
                    if (event.target !== self.element[0] && event.target !== menuElement && !$.ui.contains(menuElement, event.target) && !t.hasClass('ui-combo-trigger') && !t.parent().hasClass('ui-combo-trigger')) {
                        self.close();
                    }
                });
            }, 1);
        }

        // use another timeout to make sure the blur-event-handler on the input was already triggered
        setTimeout(function() {
            clearTimeout(self.closing);
        }, 13);
    });

これにより、現在のmousedownイベントが削除され、イベントをトリガーした要素またはその親（ボタンがクリックされたか、ボタン内のui-iconがクリックされた）がクラスを持っているかどうかを確認するチェックが追加されて追加されますui-combo-trigger。

ボタンを作成するためのコードは比較的変更されていません。新しいクラスを追加するだけですui-combo-trigger。

var button = $("<button type='button'>&nbsp;</button>").attr("tabIndex", -1).attr("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 ui-combo-trigger").click(function(event) {

        // 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();
        event.stopImmediatePropagation();
    });

score 1 · Accepted Answer

このjsfiddleを試してください。私はそれがあなたを助けると思います。

var input = $('#txtComplete');

var data = [];
var openCheck = false;

function _init() {
    for (var idx = 0; idx <= 100; idx++) {
        data.push('item: ' + idx);
    };
    input.autocomplete({
        source: data,
        minLength: 0,
        open: function(event, ui) {
            openCheck = true;
        },
        select: function(event, ui) {
            openCheck = false;
        }
    });
}

function afterInit() {
    var button = $("<button type='button'>&nbsp;</button>").attr("tabIndex", -1).attr("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(event) {
        if (openCheck) {
            input.autocomplete("close");
            openCheck = false;
        } else {
            input.autocomplete("search", "");
        }
    });
}

$(function() {
    _init();
    afterInit();
});

javascript - Jquery UI オートコンプリート コンボボックス ボタン クリック イベント

4 に答える 4

Related

Reference

javascript - Jquery UI オートコンプリートコンボボックスボタンクリックイベント