jQuery自动完成:事件选择

Question

我正在尝试从菜单中选择项目时提交表单.我在搜索表单上设置了类,我使用的是事件select for it,它位于:http://docs.jquery.com/UI/Autocomplete#event-select

现在,当您使用键盘(向上和向下)选择项目时,它可以正常工作.但是如果您使用鼠标选择一个项目,它会为您提供以前键入的值.

检查此屏幕:http://www.screenr.com/7T0s

这是我用于提交的内容:

$("#searchform-input").autocomplete({
    select: function (a, b) {
        $(".searchform1").submit()
    }
});

Answer 1

这是因为select事件的默认行为是在事件处理程序运行完毕后执行的(如果您愿意,可以取消它).

这意味着当您单击某些内容时,您的表单将在窗口小部件有机会input正确填充之前提交.

您应该能够通过执行小部件通常为您执行的操作来解决此问题:

$("#searchform-input").autocomplete({
    select: function (a, b) {
        $(this).val(b.item.value);
        $(".searchform1").submit()
    }
});

现在,您可能想知道的是肯定的,但为什么我使用键盘时它会起作用？

发生这种情况是因为focus事件实际填充了焦点项目input(仔细观察; input当您在列表中上下移动时,您将看到填充的内容).鼠标悬停项目时,将focus调用该事件,填充该项目input.当您使用enter键选择某些内容时,正确的值恰好input在focus事件中.