如何在 typeahead.js 搜索结果上单击或按 Enter 时触发 jQuery 行为？答案

【问题标题】：How to trigger jQuery behaviour on click or pressing enter on typeahead.js search results?如何在 typeahead.js 搜索结果上单击或按 Enter 时触发 jQuery 行为？
【发布时间】：2014-01-16 10:22:21
【问题描述】：

我有一个自动完成搜索字段 (typeahead.js)，并且在单击搜索建议时触发了一个行为，即 on click。

我希望在建议中向下箭头并按 Enter 时触发相同的行为。

所以我希望发生on click 或on pressing enter 的行为。

在下面的示例中，我使用输入字段而不是复制完整的 typeahead.js 搜索场景。

下面代码的问题是它只在输入字段中按回车时触发（因为e附加的条件）而不是on click。

HTML

<input class="hello" value="hello">

jQuery

$(document).on("click keypress",".hello", function (e) {
if (e.which == 13) {
alert($(this).val());
}
});

jsFiddle

http://jsfiddle.net/rwone/9xhK3/

编辑：

使用预输入代码更新了 jsFiddle：

http://jsfiddle.net/rwone/9xhK3/10/

【问题讨论】：

Trigger an event on `click` and `enter` 的可能副本

标签： jquery onclick keypress typeahead.js

【解决方案1】：

我猜你需要找到事件类型，然后 or 就可以了

$(document).on("click keypress",".hello", function (e) {
    if(e.which == 13 || e.type == "click") {
       alert($(this).val());
    }
});

【讨论】：

不幸的是，这不适用于 typeahead.js，请参阅更新的 jsFiddle 并包含预输入代码：jsfiddle.net/rwone/9xhK3/10
不幸的是，这不起作用 - 目标是 1) 单击建议时发出警报 2) 在输入一些文本后，向下箭头并按回车键时发出警报。

【解决方案2】：

解决方案

看到这个帖子后：

https://stackoverflow.com/a/18710896/1063287

这段代码：

http://codepen.io/Sinetheta/pen/eAwcl

还有这个资源：

https://github.com/twitter/typeahead.js/issues/300

function searchFunction() {
$('.my_class .typeahead').typeahead({                              
name: 'my_name',
valueKey: 'my_key',  
prefetch: 'path/to/json.json',
template: [
'<p class="key1">[[key_1]]</p>',
'<p class="my_key">[[my_key]]</p>',
'<p class="key3">[[key_3]]</p>'
].join(''),
engine: Hogan  
}).on('typeahead:selected', function(event, selection) {
var my_key = selection.my_key;
alert(my_key);
});
}

【讨论】：