Typeahead.js – 无法选择建议
我一定是个白痴。 我正在使用Typeahead.js插件。 我正在尝试使用自定义模板来提供建议。 当我的自定义模板出现时，我无法使用箭头键来实际选择项目。 如果我将鼠标hover在某个项目上，则该选择也不会突出显示。 我认为这可能只是一个造型问题。 但是，如果出现3条建议，并且我单击向下箭头两次，然后输入，则我选择的选项不会出现在文本框中。 或者，如果我用鼠标选择一个选项，则该选项不会出现在框中。
我究竟做错了什么？ 目前，我有以下内容：
var suggestions = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: '/api/suggests?querytext=%QUERY', filter: function(results) { return $.map(results.Results, function(suggestion) { return suggestion; }); } }); suggestions.initialize(); $(document).ready(function() { $('input.typeahead').typeahead( { minLength: 3 }, { name: 'suggestions', source: suggestions.ttAdapter(), templates: { suggestion: function(data) { var str = ''; if (data.Type === 'Customer') { str += ''; } else if (data.Type === 'Product') { str += ''; } str += '' + data.Name + ''; return str; } } } ); }); 建议弹出。 结果来自以下JSON：
{ "Results":[ { "Type":"Customer", "Id":5, "Name":"Bill", "LastUpdated":"01-01-2015" }, { "Type":"Customer", "Id":135, "Name":"Billows", "LastUpdated":"01-02-2015", }, { "Type":"Product", "Id":241, "Name":"Bill Check", "LastUpdate":"01-04-2015" } ], "TotalResults":3, "TotalCustomers":2, "TotalProducts":1 }
我如何a）当用户使用鼠标hover在某个项目上时使用突出显示或使用箭头键来获取它b）选择建议后，将选择项目的Name值放在输入框中？
谢谢！
尝试
$(function () { var suggestions = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: '/api/suggests?querytext=%QUERY', filter: function(results) { return $.map(results.Results, function(suggestion) { return {value:suggestion.Name, suggest:suggestion}; }); } }); suggestions.initialize(); $("#bloodhound .typeahead").typeahead({ minLength: 3, hint: true, highlight: true }, { name: 'suggestions', displayKey: 'value', templates: { suggestion: function(data) { var str = ''; if (data.suggest.Type === 'Customer') { str += '' + data.suggest.Type + ''; } else if (data.suggest.Type === 'Product') { str += '' + data.suggest.Type + ''; } str += '' + data.value + ''; return str; } }, source: suggestions.ttAdapter() }); })
$(function () { var data = { "Results":[ { "Type":"Customer", "Id":5, "Name":"Bill", "LastUpdated":"01-01-2015" }, { "Type":"Customer", "Id":135, "Name":"Billows", "LastUpdated":"01-02-2015", }, { "Type":"Product", "Id":241, "Name":"Bill Check", "LastUpdate":"01-04-2015" } ], "TotalResults":3, "TotalCustomers":2, "TotalProducts":1 }; var suggestions = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, local: $.map(data.Results, function(d) { return {value:d.Name, suggest:d} }) }); suggestions.initialize(); $("#bloodhound .typeahead").typeahead({ minLength: 3, hint: true, highlight: true }, { name: 'suggestions', displayKey: 'value', templates: { suggestion: function(data) { var str = ''; if (data.suggest.Type === 'Customer') { str += ''+data.suggest.Type+''; } else if (data.suggest.Type === 'Product') { str += ''+data.suggest.Type+''; } str += '' + data.value + ''; return str; } }, source: suggestions.ttAdapter() }); })
@font-face { font-family:"Prociono"; src: url("../font/Prociono-Regular-webfont.ttf"); } html { overflow-y: scroll; } .container { margin: 0 auto; max-width: 750px; text-align: center; } .tt-dropdown-menu, .gist { text-align: left; } html { color: #333333; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.2; } .title, .example-name { font-family: Prociono; } p { margin: 0 0 10px; } .title { font-size: 64px; margin: 20px 0 0; } .example { padding: 30px 0; } .example-name { font-size: 32px; margin: 20px 0; } .demo { margin: 50px 0; position: relative; } .typeahead, .tt-query, .tt-hint { border: 2px solid #CCCCCC; border-radius: 8px 8px 8px 8px; font-size: 24px; height: 30px; line-height: 30px; outline: medium none; padding: 8px 12px; width: 396px; } .typeahead { background-color: #FFFFFF; } .typeahead:focus { border: 2px solid #0097CF; } .tt-query { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; } .tt-hint { color: #999999; } .tt-dropdown-menu { background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px 8px 8px 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin-top: 12px; padding: 8px 0; width: 422px; } .tt-suggestion { font-size: 18px; line-height: 24px; padding: 3px 20px; } .tt-suggestion.tt-cursor { background-color: #0097CF; color: #FFFFFF; } .tt-suggestion p { margin: 0; } .gist { font-size: 14px; } .example-twitter-oss .tt-suggestion { padding: 8px 20px; } .example-twitter-oss .tt-suggestion + .tt-suggestion { border-top: 1px solid #CCCCCC; } .example-twitter-oss .repo-language { float: right; font-style: italic; } .example-twitter-oss .repo-name { font-weight: bold; } .example-twitter-oss .repo-description { font-size: 14px; } .example-sports .league-name { border-bottom: 1px solid #CCCCCC; margin: 0 20px 5px; padding: 3px 0; } .example-arabic .tt-dropdown-menu { text-align: right; } [class|=icon] { color:orange; }
您是否尝试将valueKey添加到指向其名称的函数中？ 请参阅这里的答案：
Typeahead.js确实给了我建议，但没有选择它们