5

I'm using the jQuery UI AutoComplete control (just updated to jQuery UI 1.8.1). Whenever the user leaves the text box, I want to set the contents of the text box to a known-good value and set a hidden ID field for the value that was selected. Additionally, I want the page to post back when the contents of the text box are changed.

Currently, I am implementing this by having the autocomplete select event set the hidden id and then a change event on the text box which sets the textbox value and, if necessary, causes a post back.

If the user just uses the keyboard, this works perfectly. You can type, use the up and down arrows to select a value and then tab to exit. The select event fires, the id is set and then the change event fires and the page posts back.

If the user starts typing and then uses the mouse to pick from the autocomplete options though, the change event fires (as focus shifts to the autocomplete menu?) and the page posts back before the select event has a chance to set the ID.

Is there a way to get the change event to not fire until after the select event, even when a mouse is used?

$(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() 函数。

您可以在自动完成演示和文档页面查看事件列表。它指出 change 事件总是在 close 事件之后触发，我认为它是在 select 事件之后触发的。查看“组合框”的源代码以查看示例更改事件挂钩。

于 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 回答