jQuery的自动完成：事件选择 [英] jQuery Autocomplete: Event-select

问题描述

我想当从菜单中选择一个项目提交表单。我设置了搜索表单类和我使用的情况下选择它是在这里找到：<一href=\"http://docs.jquery.com/UI/Autocomplete#event-select\">http://docs.jquery.com/UI/Autocomplete#event-select

现在，当您选择使用键盘（上下）的项目，它的工作原理。但是，如果你用鼠标选择一个项目，它给你这是previously键入的值。

勾选此screenr： http://www.screenr.com/7T0s

这是我使用的提交：

  $（＃searchform输入）。自动完成（{
    选择：功能（A，B）{
        $（。searchform1）。提交（）
    }
}）;
 

解决方案

这是因为选择执行事件的默认行为<一个href=\"https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L241\">after事件处理程序运行完毕（这样就可以取消它，如果你选择）。

这意味着，当你点击的东西，小部件有机会来填充输入您之前提交表单正常。

您应该能够做什么小部件一般不会为你解决这个问题：

  $（＃searchform输入）。自动完成（{
    选择：功能（A，B）{
        $（本）.VAL（b.item.value）;
        $（。searchform1）。提交（）
    }
}）;
 

现在，你可能想知道是是，但为什么当我使用键盘工作？

这是因为焦点事件实际填充在输入焦点项（仔细看，你会请参阅输入填充，你上下移动列表）。当你将鼠标放置到一个项目中，焦点事件被称为，填充输入。当您选择使用输入键，正确的值恰好是在输入因为<$ C东西$ C>焦点事件。

I am trying to submit a form when an item is selected from the menu. I set class on the search form and I am using the event select for it which is found here: http://docs.jquery.com/UI/Autocomplete#event-select

Now, when you select an item using the keyboard (UP and Down), it works. But if you select an item using the mouse, it gives you the value which is previously typed.

Check this screenr: http://www.screenr.com/7T0s

This is what I use for submitting:

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

解决方案

This is because the select event's default behavior is executed after your event handler is finished running (so that you can cancel it if you so choose).

This means that when you click something, your form is submitted before the widget has a chance to populate the input properly.

You should be able to fix this by doing what the widget normally does for you:

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

Now, what you may be wondering is yes, but why does it work when I use the keyboard?

This happens because the focus event actually populates the focused item in the input (look closely; you'll see the input populated as you move up and down the list). When you mouseover an item, the focus event is called, populating the input. When you select something using the enter key, the correct value happens to be in the input because of the focus event.

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