基本的预输入实现答案

【问题标题】：Basic typeahead implementation基本的预输入实现
【发布时间】：2013-07-28 02:02:18
【问题描述】：

我正在尝试实现国家/地区预输入示例，但难以加载它。我做错了什么？

HTML

<input type="text" class="typeahead" placeholder="Enter your location">

$(document).ready(function() {
  $('.typeahead').typeahead({
    name: 'countries',
    prefetch: 'http://twitter.github.io/typeahead.js/data/countries.json',
    limit: 10
  });
}

【问题讨论】：

您的prefetch 参数是否指定了与您使用该代码的页面不同的域？请注意，您的小提琴根本不起作用，因为您没有从“框架和扩展”下拉列表中选择“jQuery”，也没有指定包含预输入插件，但即使您修复它仍然会赢由于 URL 无法解析为可访问的路径，因此无法正常工作。
这只是我尝试使用 jsfiddle 并为你们提供一些代码（我添加 typeahead.js 作为外部资源）；预取位于我的服务器上。
你的 jsfiddle 有很多问题。您的外部资源指向错误的 URL，您有语法错误，并且您的预取 url 将 404。如果不修复它，几乎不可能帮助调试您的问题。

标签： javascript json bootstrap-typeahead typeahead typeahead.js

【解决方案1】：

这应该是几乎可以工作的小提琴：http://jsfiddle.net/GDqme/

您的代码的问题是您正在尝试使用：

prefetch: 'http://twitter.github.io/typeahead.js/data/countries.json'

而且它不起作用，因为它是跨站点请求，而 Twitter 不允许这样做。

您应该下载该 JSON 文件并在本地进行设置：

$('.typeahead').typeahead({
    name: 'countries',
    prefetch: '/data/countries.json',
    limit: 10
});

无论如何，请记住 console（来自 Firebug / Chrome 开发工具）是您的朋友。

【讨论】：