jquery – typeahead.js预取问题

前端之家收集整理的这篇文章主要介绍了jquery – typeahead.js预取问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在Google App Engine项目中使用了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

解决方法

你的问题在example.json中,因为事实证明……你需要使用双引号引用键名,并且所有字符串(例如在标记中)也需要用双引号引用.

例如,这对我有用:

[{"value": "Abc Def","tokens": ["Abc","Def"],"name": "random1","val2": "A","val3": "B"}]

将./json/example.json中的url更改为/json/example.json(删除前导点)也是明智之举.

原文链接:https://www.f2er.com/jquery/176993.html

猜你在找的jQuery相关文章