如何在jQuery自动完成中绑定按键事件？

Question

正如您在http://jsfiddle.net/hn838/4/中看到的，“click”对于自动填充器来说是有效的，但是我希望也可以通过按“Enter”键触发相同的代码。然而，这对我来说并不起作用。这是两者的代码：

$('.ui-autocomplete').on('click', '.ui-menu-item', function(){
    $('.college').trigger('click');
});

按键：

 $('.ui-autocomplete').on('keypress', '.ui-menu-item', function(e){
            if (e.which == 13) {
                         e.preventDefault();
            $('.college').trigger('click');
           }
        });

我希望在 click 和 keypress 事件上执行 $('.college').trigger('click');。点击事件（click）可以正常工作，但按键事件（keypress）不能。有什么线索吗？

- Anshul

---

由于有些混淆：请问您是否真的想处理实际的按键操作，还是更关注从列表中选择一个元素，这样更有意义。 - a better oliver

从列表中选择一个元素。 - Anshul

Answer 1

你可以将一个函数添加到选择(select)事件，而不是绑定按键事件：

select: function(){
    $('.college').trigger('click');
}

那样的话，它只会在用户实际选择自动完成值时触发。 http://jsfiddle.net/louisbros/hn838/10/

- louisbros

---

应该是被接受的答案。使用select: function(e,item){...}可以让楼主完全按照他想要的去做。 - A. Wolff

Answer 2

您的fiddle中没有ui-autocomplete类。所以我假设它看起来像这样:

<input type = 'text' class = 'search ui-autocomplete' />

同时在你的fiddle中也没有ui-menu-item这个类，所以你需要像这样做：

$('.ui-autocomplete').on('keypress', function(e){
    if (e.which == 13) {
        e.preventDefault();
        $('.college').trigger('click');
    }
});

更新的Fiddle

---

如果您想使用由jQuery UI自动生成的类，可以这样做：

$('.ui-autocomplete-input').on('keypress', function(e){
    if (e.which == 13) {
        e.preventDefault();
        $('.college').trigger('click');
    }
});

Fiddle

- Eli

---

@pandit 你能再检查一下吗？应该是 ui-autocomplete-input 而不是 ui-autocomplete。 - Eli

你移除了 '.ui-menu-item'，我该如何在这段代码中追踪哪个 <li> ui-menu-item 被按下了？ - Anshul

@pandit 抱歉，您的 .ui-menu-item 元素在哪里？您在 on 函数中针对它进行了定位，但我无法在您的 fiddle 中找到这个元素。 - Eli

你的第二个小提琴完全符合我的要求。感谢你的努力和时间。 - Anshul

无论如何，当您在输入字段中输入内容时，将创建一个带有建议的ul，其中li具有类.ui-menu-item，我正在引用它... - Anshul

我无法理解这个回答与你的问题有何关联。 - A. Wolff