Question

所以我有一个我正在使用示例表单Typeahead.js页面的页面。当我在这里的示例中使用json文件时，它工作得很好：http://twitter.github.io/typeahead.js/data/repos.json

但是当我在这里使用我自己的JSON时：http://www.irishcentral.com/templates/ta-articles.json我收到错误＆＃34;无法读取属性＆＃39;长度＆＃39;未定义＆＃34;。从我所看到的是因为JSON无效但我检查了我的JSON对两个验证器，他们都说它有效。提前谢谢！

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="CustomTemplate">
    <input class="example-irish typeahead" type="text" placeholder="" />
</div>

<script src="$cms.include("handlebars.js").url"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="$cms.include("typeahead.bundle.js").url"></script>

<script>
    $(document).ready(function () {
        var repos = new Bloodhound({
          datumTokenizer: function(d) { return d.tokens; },
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          prefetch: '/templates/repos.json'
        });

        repos.initialize();

        $('.CustomTemplate .typeahead').typeahead(null, {
          name: 'twitter-oss',
          displayKey: 'title',
          source: repos.ttAdapter(),
          templates: {
            suggestion: Handlebars.compile([
              '<p class="repo-language">{{author}}</p>',
              '<p class="repo-name">{{title}}</p>',
              '<p class="repo-description">{{summary}}</p>'
            ].join(''))
          }
        });
     });
</script>
</body>
</html>

Answer 1

我认为你在prefetch中指定的路径是错误的。尝试使用以下prefetch: '/templates/repos.json'替换prefetch: '/templates/ta-articles.json'。

Answer 2

所以我想出来了，问题出在JSON中。 JSON中没有一个令牌元素，因此调用d.tokens会导致错误。我把它改成了我在json“title”中的标签，它现在运行得很好！

Typeahead.js无法读取未定义的属性“长度”

2 个答案: