我将为您翻译以下内容:
这是我的JavaScript。
我正在尝试使用typeahead.js实现搜索框,用户可以通过点击typeahead中的行项目或使用键盘上下箭头选择条目,并通过回车键导航到它们。
这是我的HTML代码:
<div id="remote">
<input class="typeahead" type="text" placeholder="Search for people">
</div>
这是我的JavaScript。
$(document).ready(function() {
var castDirectors = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: '../api/v1/search/people_typeahead',
remote: '../api/v1/search/people_typeahead?q=%QUERY',
dupDetector: function(remoteMatch, localMatch) {
return remoteMatch.value === localMatch.value;
}
});
castDirectors.initialize();
$('#remote .typeahead').typeahead(null, {
name: 'cast-directors',
displayKey: 'value',
source: castDirectors.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'no matching names',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<p><a id="typeahead" href="{{link}}">{{value}}</a></p>')
}
});
});
当input类型为"text"时,如果我使用键盘导航并用enter键进行选择,它只会填充文本框。我希望按下enter键可以等同于点击行项目。我需要改变什么?