logo标签列表

typeahead.js预加载问题

jquerytypeaheadprefetchtypeahead.js
6
我正在一个Google App Engine项目中使用typeahead.js，但在使用prefetch时遇到问题。 当我使用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'},
                  limit: 3,
                  valueKey: 'name',
                  template: '<p>{{value}}</p>',
                  engine: Hogan
                });
            });
    </script>
</body>
</html>

这是一个example.json文件的例子：

[{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'}]
问题出现在Chrome和Firefox中。在Chrome中进行调试，我可以看到example.json文件已被服务并接收。例如.json的网络活动预览和响应显示了文件的全部内容。然而，在Chrome调试器的资源部分，本地存储为空。没有控制台错误，只有这个消息。 
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
关于这篇帖子，我没有跨域问题；关于这篇帖子，我将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;
        }
      },
      limit: 3,
      valueKey: 'name',
      template: '<p>{{value}}</p>',
      engine: Hogan,
    });
});

然后我尝试了这个:

$(document).ready(function(){
    $('input.typeahead-example').typeahead({
      name: 'example',
      prefetch: {url: './json/example.json', ttl: '0'},
      limit: 3,
      valueKey: 'name',
      template: '<p>{{value}}</p>',
      engine: Hogan,
    }).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
尝试不指定预取数据集的name（在您的情况下为"example"），以确保它不是从本地存储中获取的。 - Nitzan Shaked
@NitzanShaked 谢谢您的建议。尝试了，但没有什么改变。 - rusty1042
添加一个filter，然后使用console.log打印参数。确保它有意义。如果没问题，试着从filter返回一个虚拟的Datum，以确保它正常工作。 - Nitzan Shaked
@NitzanShaked 再次感谢 - 根据建议更新了上面的信息。 - rusty1042
“filter” 应该是 “prefetch”的一部分。再试一次？ - Nitzan Shaked
@NitzanShaked 感谢您的纠正 - 我已经进行了更改（现在在上面的帖子中反映），但是自动完成仍然没有响应。您能否在您的端上运行？也许我的环境出了些问题（尽管我在GAE、本地使用GAE开发服务器和本地使用python SimpleHTTPServer时都遇到了同样的问题）。 - rusty1042
2个回答
阿里云服务器只需要99元/年，新老用户同享，点击查看详情
14
你的问题出在example.json文件中，事实证明...你需要使用双引号括起来键名，并且所有字符串（例如在tokens中）也需要用双引号引起来。 例如，下面这个对我是有效的：
[{"value": "Abc Def", "tokens": ["Abc", "Def"], "name": "random1", "val2": "A", "val3": "B"}]

将 url 从 ./json/example.json 更改为 /json/example.json（删除前导点）也是明智的。

做到了 - 谢谢！奇怪的是 local 可以识别数据集而不需要引号。 - rusty1042
我很高兴。如果这个答案解决了你的问题，请随意点赞并接受它。 - Nitzan Shaked
接受了 - 我还是一个 Stack Exchange 新手，需要更多的声望才能点赞，但我一旦到那里就会这样做。 - rusty1042
6
@diddleboo在使用Javascript对象字面量时，local识别了数据集而无需引号。但需要注意的是，这并不等同于JSON。 Javascript对象字面量只是Javascript环境中的一个object，语言规范规定为对象属性命名不必使用双引号。 而JSON代表JavaScript对象表示法。它是一种数据传输格式，其语法要求属性名称使用双引号。欲了解更多关于JSON定义，请参见http://en.wikipedia.org/wiki/JSON。
问题的根本原因更加清晰明了。 - rusty1042
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，