我有以下代码,如果我使用2.0.0版本,该代码肯定会返回正确的数据结果,但是由于某些原因,bootstrap的typeahead插件给我一个错误。我将其粘贴在代码示例下面:
<input id="test" type="text" /> $('#test').typeahead({ source: function(typeahead, query) { return $.post('/Profile/searchFor', { query: query }, function(data) { return typeahead.process(data); }); } });
当我运行此示例时,我得到一个jQuery错误,内容如下:
** item is undefined matcher(item=undefined)bootst...head.js (line 104) <br/>(?)(item=undefined)bootst...head.js (line 91) <br/>f(a=function(), b=function(), c=false)jquery....min.js (line 2) <br/>lookup(event=undefined)bootst...head.js (line 90) <br/>keyup(e=Object { originalEvent=Event keyup, type="keyup", timeStamp=145718131, more...})bootst...head.js (line 198) <br/>f()jquery....min.js (line 2) <br/>add(c=Object { originalEvent=Event keyup, type="keyup", timeStamp=145718131, <br/>more...})jquery....min.js (line 3) <br/>add(a=keyup charCode=0, keyCode=70)jquery....min.js (line 3) <br/>[Break On This Error] <br/>return item.toLowerCase().indexOf(this.query.toLowerCase())**
有什么想法吗?…相同的代码在插件的2.0.0版本中有效,但是无法写入我的剔除对象模型。
对于2.0.0版本,此代码正在工作:
var searchFunction = function(typeahead, query) { $.ajax({ url: "/Profile/searchFor?tableName=" + tableName + "&query=" + query + "&extendedData=" + $("#" + extendedData).val(), success: function(data) { if (data.errorText != null) { toggleLoading("false"); showDialog(data.errorText, "Error"); return; } var result = data.results.split("::"); typeahead.process(result); }, select: function(event, ui) { } }); } $("#" + inputBoxId).typeahead({ source: searchFunction, onselect: function(obj) { } });
看一下这个拉取请求,它看起来像您要找的东西(它来自bootstrap typeahead v2.0.2的fork)。
我自己使用它,它正在工作:)
您也可以尝试此解决方案。我只是更改了项目以使用此项目,因为它将在将来的版本中得到支持,并且看起来更干净:)
就我而言:
$("#typeahead").typeahead({ source: function(query, process) { $.post('url_path', { q: query, limit: 4 }, function(data) { process(data); }); // end of post } });
其中脚本 url_path 需要2个参数 q (字符串)和 limit (结果限制)并返回json响应(数组):
对查询 i 的限制为 4的 示例响应:
[“ Eminem”,“ Limp Bizkit”,“ Rihanna”,“ Will Smith”]