5

jQuery UI AutoComplete コントロールを使用しています(jQuery UI 1.8.1 に更新されたばかりです)。ユーザーがテキスト ボックスを離れるたびに、テキスト ボックスの内容を既知の適切な値に設定し、選択された値に非表示の ID フィールドを設定したいと考えています。さらに、テキストボックスの内容が変更されたときにページをポストバックしたい.

現在、オートコンプリートの選択イベントに非表示の ID を設定してから、テキスト ボックスの値を設定し、必要に応じてポスト バックを発生させるテキスト ボックスの変更イベントを設定することで、これを実装しています。

ユーザーがキーボードのみを使用する場合、これは完全に機能します。入力し、上矢印と下矢印を使用して値を選択し、タブで終了します。select イベントが発生し、id が設定されてから、change イベントが発生し、ページがポストバックされます。

ただし、ユーザーが入力を開始してからマウスを使用してオートコンプリート オプションから選択すると、change イベントが発生し (フォーカスがオートコンプリート メニューに移動すると)、select イベントが ID を設定する前にページがポストバックされます。

マウスが使用されている場合でも、選択イベントの後まで変更イベントが発生しないようにする方法はありますか?

$(function() {
    var txtAutoComp_cache = {};
    var txtAutoComp_current = { label: $('#txtAutoComp').val(), id: $('#hiddenAutoComp_ID').val() };
    $('#txtAutoComp').change(function() {
        if (this.value == '') { txtAutoComp_current = null; }
        if (txtAutoComp_current) {
            this.value = txtAutoComp_current.label ? txtAutoComp_current.label : txtAutoComp_current;
            $('#hiddenAutoComp_ID').val(txtAutoComp_current.id ? txtAutoComp_current.id : txtAutoComp_current);
        } else {
            this.value = '';
            $('#hiddenAutoComp_ID').val('');
        }
        // Postback goes here
    });
    $('#txtAutoComp').autocomplete({
        source: function(request, response) {
            var jsonReq = '{ "prefixText": "' + request.term.replace('\\', '\\\\').replace('"', '\\"') + '", "count": 0 }';
            if (txtAutoComp_cache.req == jsonReq && txtAutoComp_cache.content) {
                response(txtAutoComp_cache.content);
                return;
            }
            $.ajax({
                url: 'ajaxLookup.asmx/CatLookup',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                data: jsonReq,
                type: 'POST',
                success: function(data) {
                    txtAutoComp_cache.req = jsonReq;
                    txtAutoComp_cache.content = data.d;
                    response(data.d);
                    if (data.d && data.d[0]) { txtAutoComp_current = data.d[0]; }
                }
            });
        },
        select: function(event, ui) {
            if (ui.item) { txtAutoComp_current = ui.item; }
            $('#hiddenAutoComp_ID').val(ui.item ? ui.item.id : '');
        }
    });
});
4

3 に答える 3

3

これは、jQuery の change() 関数を使用する代わりに、select と同様に、変更イベントをオートコンプリート オプションとして実装することで解決できます。

イベントのリストは、オートコンプリートのデモとドキュメントのページで確認できます。それは、select イベントの後に発生すると思われる close イベントの後に常に change イベントが発生すると述べています。'combobox' のソースを見て、変更イベント フックの例を確認してください。

于 2011-01-18T05:22:29.340 に答える
1

私がこれをしたとき、それはマウス選択で私のために働きました：

focus: function (event, ui) {
                       $j(".tb").val(ui.item.value);
                       return true;
                    }

これにより、キーボードイベントで発生するのと同じように、マウスフォーカスイベントでTextBoxテキストが変更されます。そして、アイテムを選択すると、選択変更がトリガーされます。

于 2011-07-26T14:50:33.223 に答える
0

変更イベントが発生しないようにすることについてはわかりませんが、隠しフィールドが設定され、TextBox に現在値があることを確認する条件を変更イベントに簡単にスローできます。

于 2010-05-19T23:24:17.723 に答える