Typeahead.js预取选项不起作用

Typeahead.js prefetch option not working

本文关键字：不起作用 选项 预取 js Typeahead      更新时间：2023-09-26

我无法在typeahead.js中使用预取选项。本地数据工作正常。对之前发布的问题的回答表明缓存可能是一个问题，但我已经将ttl设置为0，并正在Firefox和Chrome中以私人浏览模式进行测试。我错过了什么？

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://twitter.github.com/typeahead.js/releases/latest/typeahead.css">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://twitter.github.com/typeahead.js/releases/latest/typeahead.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
  $('#searchText').typeahead([
    {
      name: 'terms',
      //local: ["United States", "Canada"],
      prefetch: 'http://twitter.github.io/typeahead.js/data/countries.json',
      ttl: 0
      }
    ]);
  });
</script>
<body>
<div class="container">
  <input class="typeahead" type="text" id="searchText">
</div>
</body>
</html>

当某些东西"不工作"时，您应该始终检查console（Firebug/Chrome开发工具），这是您使用JS时最好的朋友。

在这种情况下，并不是prefetch不工作。但是Github不允许您从不同的域获取json。如果你检查你的控制台，你会看到这个错误：

XMLHttpRequest cannot load http://twitter.github.io/typeahead.js/data/countries.json. Origin http://yourdomain is not allowed by Access-Control-Allow-Origin.

因此，如果你想让这个例子在本地运行，你应该下载JSON文件并在本地进行设置，然后更改URL，比如：

$(document).ready(function(){
    $('#searchText').typeahead({
        name: 'terms',
        prefetch: '/data/countries.json', // go to http//yourdomain/data/countries to make sure the path is correct
        ttl: 0
    });
});

希望能有所帮助。

相关文章：