大佬教程收集整理的这篇文章主要介绍了jquery – typeahead.js预取问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
当我使用local时,typeahead工作正常但是如果我将相同的数据集复制到json文件并使用prefetch,则typeahead不起作用,即不显示任何建议.
这是我使用local的代码版本：
<!doctype html>
<html>
<head>
<Meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<div><input type="text" name="typeahead-example" placeholder="Type here" class="typeahead-example"></div>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/hogan.js" type="text/javascript"></script>
<script src="./js/typeahead.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('input.typeahead-example').typeahead({
name: 'example',local: [{value: 'Abc Def',tokens: ['Abc','Def'],name: 'random1',val2: 'A',val3: 'B'},{value: 'Def Ghi',tokens: ['Def','Ghi'],name: 'random2',val2: 'C',val3: 'D'},{value: 'Ghi Jkl',tokens: ['Ghi','Jkl'],name: 'random3',val2: 'E',val3: 'F'},{value: 'Jkl Mno',tokens: ['Jkl','Mno'],name: 'random4',val2: 'G',val3: 'H'}],limit: 3,valueKey: 'name',template: '<p>{{value}}</p>',ENGIne: Hogan
});
});
</script>
</body>
</html>
这是我使用prefetch的代码版本：
<!doctype html>
<html>
<head>
<Meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<div><input type="text" name="typeahead-example" placeholder="Type here" class="typeahead-example"></div>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/hogan.js" type="text/javascript"></script>
<script src="./js/typeahead.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('input.typeahead-example').typeahead({
name: 'example',prefetch: {url: './json/example.json',ttl: '0'},ENGIne: Hogan
});
});
</script>
</body>
</html>
这是example.json文件：
[{value: 'Abc Def',val3: 'H'}]
Chrome和Firefox中出现此问题.在chrome中调试,我可以看到example.json文件被提供和接收. example.json的网络活动的预览和响应完整地显示了文件的内容.但是,在chrome调试器的资源部分,Local Storage为空.没有控制台错误,只有这条消息
XHR finished loading: "http://localhost:8000/json/example.json". jquery-1.10.2.js:8706 send jquery-1.10.2.js:8706 jQuery.extend.ajax jquery-1.10.2.js:8136 jQuery.(anonymous function) jquery-1.10.2.js:8282 jQuery.extend.getJSON jquery-1.10.2.js:8265 c.mixin._loadPrefetchData typeahead.min.js:7 proxy jquery-1.10.2.js:827 c.mixin.initialize typeahead.min.js:7 proxy jquery-1.10.2.js:827 (anonymous function) typeahead.min.js:7 jQuery.extend.map jquery-1.10.2.js:782 g typeahead.min.js:7 jQuery.extend.each jquery-1.10.2.js:657 jQuery.fn.jQuery.each jquery-1.10.2.js:266 b.initialize typeahead.min.js:7 jQuery.fn.typeahead typeahead.min.js:7 (anonymous function) prefetch.html:14 fire jquery-1.10.2.js:3048 self.fireWith jquery-1.10.2.js:3160 jQuery.extend.ready jquery-1.10.2.js:433 completed
关于this post,我没有跨域问题,关于this post,我已经将ttl设置为0并且问题仍然存在.
任何帮助,将不胜感激.
>更新*
根据@NitzanShaked的建议,我添加了一些控制台日志记录.
首先我尝试了这个,没有在控制台中注册.
$(document).ready(function(){ $('input.typeahead-example').typeahead({ name: 'example',prefetch: { url: './json/example.json',ttl: '0',filter: function (data) { console.log(data); for (var i = 0; i < data.length; i++) { datum = data[i]; console.log(datum); } return data; } },ENGIne: Hogan,}); });
然后我尝试了这个：
$(document).ready(function(){ $('input.typeahead-example').typeahead({ name: 'example',}).bind('typeahead:opened',function (obj,datum) { console.log(obj); console.log(datum); console.log(datum.val2); }); });
当我在输入字段内单击时,这导致控制台记录以下内容
jQuery.Event {type: "typeahead:opened",timestamp: 1378502920480,jQuery1102039872112357988954: true,istrigger: 3,namespace: ""…} currentTarget: input.typeahead-example tt-query data: null delegateTarget: input.typeahead-example tt-query handLeobj: Object istrigger: 3 jQuery1102039872112357988954: true namespace: "" namespace_re: null result: undefined target: input.typeahead-example tt-query timestamp: 1378502920480 type: "typeahead:opened" __proto__: Object prefetch.html:22 undefined prefetch.html:23 Uncaught TypeError: CAnnot read property 'val2' of undefined prefetch.html:24 (anonymous function) prefetch.html:24 jQuery.event.dispatch jquery-1.10.2.js:5095 elemData.handle jquery-1.10.2.js:4766 jQuery.event.trigger jquery-1.10.2.js:5007 (anonymous function) jquery-1.10.2.js:5691 jQuery.extend.each jquery-1.10.2.js:657 jQuery.fn.jQuery.each jquery-1.10.2.js:266 jQuery.fn.extend.trigger jquery-1.10.2.js:5690 c.mixin.trigger typeahead.min.js:7 c.mixin._propagateEvent typeahead.min.js:7 proxy jquery-1.10.2.js:827 d.trigger typeahead.min.js:7 proxy jquery-1.10.2.js:827 c.mixin.open typeahead.min.js:7 proxy jquery-1.10.2.js:827 c.mixin._openDropdown typeahead.min.js:7 proxy jquery-1.10.2.js:827 d.trigger typeahead.min.js:7 proxy jquery-1.10.2.js:827 c.mixin._handleFocus typeahead.min.js:7 proxy jquery-1.10.2.js:827 jQuery.event.dispatch jquery-1.10.2.js:5095 elemData.handle
以上是大佬教程为你收集整理的jquery – typeahead.js预取问题全部内容，希望文章能够帮你解决jquery – typeahead.js预取问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。