单击jQuery UI Autocomplete时禁止输入onchange

时间:2012-03-02 19:30:50

标签: javascript jquery jquery-ui javascript-events jquery-ui-autocomplete

我有一个使用jQuery UI Autocomplete的文本输入元素。输入具有绑定到它的onchange事件,以根据用户的选择更改其他一些表单值。当用户从自动填充中选择一个选项时,我还想更改其他表单值。

问题在于,如果用户正在查找“啤酒”,但只键入“蜜蜂”,然后点击自动完成中的啤酒选项,则输入的onchange将以值“bee”触发,然后自动完成select function fires(具有正确的“啤酒”值)。由于这些处理程序都使用ajax调用来查找某些内容,因此我陷入了竞争状态。

我的问题是:在用户点击自动填充选项的情况下,是否有某些方法可以让onchange无法激活或中止。注意:这仅在单击时发生,仅使用键盘选择选项不会触发输入的onchange。

当自动完成处于活动状态时,我不能完全禁用onchange,因为用户只会继续输入,退出输入而不从自动完成中选择任何内容。

我已经做了很多的console.log(),并且onchange事件在我能想到的所有其他事件之前触发,包括输入的焦点,自动完成项目的焦点等。

1 个答案:

答案 0 :(得分:4)

此问题正是自动填充change事件的原因。听起来你应该能够利用这个事件来根据用户是否选择了一个项目来执行逻辑(从而删除了你的onchangeautocompleteselect事件处理程序)。例如:

$("#auto").autocomplete({
    source: ['hi', 'bye', 'foo', 'bar'],
    change: function (event, ui) {
        if (ui.item) {
            /* user selected an item */           
        } else {
            /* user entered a new item */
        }
    }
});

示例: http://jsfiddle.net/bdDs7/