jQuery自动完成选择点击更改后？ [英] jQuery AutoComplete select firing after change?

问题描述

我正在使用 jQuery UI自动完成控件（刚刚更新为jQuery UI 1.8.1 ）。每当用户离开文本框时，我想将文本框的内容设置为已知好的值，并为所选的值设置隐藏的ID字段。此外，当文本框的内容发生变化时，我希望该页面发布。

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.

目前，我通过将自动完成选择事件设置为隐藏ID来实现然后在设置文本框值的文本框中的更改事件，如有必要，可以发回发布。

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.

如果用户只是使用键盘，这可以完美地工作。您可以键入，使用向上和向下箭头选择一个值，然后选项卡退出。选择事件触发，设置id，然后更改事件触发，页面发回。

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.

如果用户开始输入，然后使用鼠标从自动完成选项，但更改事件触发（焦点转移到自动完成菜单？），并且页面在选择事件有机会设置ID之前发回。

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

推荐答案

您可以通过将更改事件实现为自动完成选项，就像选择一样，而不是使用jQuery的change（）函数。

You can solve this by implementing your change event as an autocomplete option, just like select, instead of using jQuery's change() function.

您可以在自动完成演示&文档页面。它指出，更改事件总是在关闭事件之后触发，我认为更改事件在select事件之后被触发。看看'combobox'的来源，看一个变化事件钩子的例子。

You can see the list of events at the autocomplete demo & documentation page. It states that the change event is always fired after the close event, which I presume is fired after the select event. Have a look at the source for 'combobox' to see an example change event hook.

这篇关于jQuery自动完成选择点击更改后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！