代码之家 › 专栏 › 技术社区 › Zarigani

jQuery自动完成更改后选择触发?

jquery-autocomplete jquery-ui events jquery javascript

Zarigani · 技术社区 · 15 年前

我用的是 jQuery UI AutoComplete control (刚刚更新到jQuery UI 1.8.1)。每当用户离开文本框时,我想将文本框的内容设置为已知的良好值,并为所选的值设置一个隐藏的ID字段。此外,当文本框的内容发生变化时,我希望页面发回。

目前,我通过让autocomplete select事件设置隐藏id,然后在文本框上设置一个更改事件来实现这一点,该事件设置文本框的值,如果需要,还会导致回发。

如果用户只使用键盘,这将非常有效。您可以键入、使用上下箭头选择一个值,然后使用tab键退出。触发select事件,设置id,然后触发change事件,页面发回。

如果用户开始键入,然后使用鼠标从自动完成选项中选择,则会触发更改事件(当焦点转移到自动完成菜单时?)并且页面会在select事件有机会设置ID之前发回。

有没有办法让更改事件在select事件之后才触发,即使使用了鼠标?

$(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 : '');
        }
    });
});

3 回复 | 直到 15 年前

ndbroadbent 15 年前

您可以通过将更改事件实现为自动完成选项来解决这个问题,就像选择一样,而不是使用jQuery的change()函数。

你可以在网站上看到活动列表 the autocomplete demo & documentation page 。它声明更改事件总是在关闭事件之后触发,我认为这是在选择事件之后触发的。请查看“combobox”的源代码,以查看示例更改事件挂钩。

Poornima 14 年前

当我这样做时,鼠标选择对我很有效:

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

这会导致文本框文本在鼠标焦点事件中发生变化,就像它在键盘事件中发生的方式一样。当我们选择一个项目时,它会触发选择更改。

Nathan Taylor 15 年前

我不知道如何防止更改事件触发,但您可以轻松地在更改事件中抛出一些条件,以确保已设置隐藏字段,并且文本框当前已设置 A. 价值