Question

我正在寻找一个好的jQuery自动建议列表插件。我搜索了Google，发现很多但Bootstrap typeahead插件看起来很不错。我通过使用Bootstrap typeahead，但坚持一个区域才能正确理解。

我从此网址 http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/

了解了Bootstrap预先使用类型

http://deanhume.com/Home/BlogPost/twitter-bootstrap-typeahead-and-asp-net-mvc---key-value-pairs/88

这里我粘贴的代码对我来说不太清楚：

("#Search").typeahead({
source: function (query, process) {
var countries = [];
map = {};

// This is going to make an HTTP post request to the controller
return $.post('/Client/CountryLookup', { query: query }, function (data) {

// Loop through and push to the array
$.each(data, function (i, country) {
map[country.Name] = country;
countries.push(country.Name);
});

// Process the details
process(countries);
});
},
updater: function (item) {
var selectedShortCode = map[item].ShortCode;

// Set the text to our selected id
$("#details").text("Selected : " + selectedShortCode);
return item;
}

我想知道什么时候会调用源函数＆amp;当它是功能时，那么有人需要调用它...所以谁调用这个源函数？
var countries = []; map = {};我可以理解国家/地区是数组，但map = {}是什么？为什么需要map = {}？如果我省略这个map = {}那会发生什么？
为什么我们需要写这一行？ map[country.Name] = country;
更新程序正在做什么以及何时调用？

updater：function（item）{ var selectedShortCode = map [item] .ShortCode;

//将文本设置为我们选择的ID $（“＃details”）。text（“Selected：”+ selectedShortCode）; 归还物品; }
自动建议列表显示在图片中。此列表的div将由此插件自动生成，还是我们需要在页面中放置任何div？
<input type="text" id="Search" data-provide="typeahead" placeholder="Client Name" autocomplete="off" /> 它是强制性的data-provide =“typeahead”吗？如果我错过了这个属性，那么插件是否有效？只需在上面的网址中看到此网址 http://www.arungudelli.com/asp-net-mvc/jquery-autocomplete-using-asp-net-mvc/ ，我就会看到此人没有使用data-provide="typeahead"属性。
我看到有些人使用此remote: 'Home/GetData?q=%QUERY',，很少有人不使用它。

寻找以上所有要点的解释。请明智地回答。

更新

8）我可以理解source是一个初始化下拉列表的选项。实际上，它是您定义并提供给预先输入的函数，以便它可以获取数据以填充您的下拉列表。

我想知道何时会调用source函数？当用户在文本框中输入任何内容时，typeahead会调用source函数吗？我是对的吗？

9）我理解map = {}是JavaScript对象，但我不明白为什么这个人在示例代码中使用这个对象。当任何人使用这样的代码map[country.Name] = country;时，这意味着使用typeahead是必需的。

map[country.Name] = country;这段代码的含义是什么？地图对象将具有哪种数据？

你能不能给出来自不同地点的每种来源的例子。我需要很少的本地使用示例：，remote：，prefetch等。

但如果你看到我的例子那么你会注意到如何使用jquery $ post（）函数来获取数据，所以我想知道当人们应该使用这些方法local：，remote：，prefetch等来获取数据？

{"ShortCode":"US","Name":"United States"},{"ShortCode":"CA","Name":"Canada"},
{"ShortCode":"AG","Name":"Antigua and/or Barbuda"}]

请给我回答我的新问题。感谢

Answer 1

重新评论我的评论： 您使用哪种打印版本？ v0.10？因为typeahead已经经历了许多重大变化，因为它还没有在发布版本中，你应该看看这里：http://twitter.github.io/typeahead.js/examples 举些例子和这里选项https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#options https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#api {{3}} 对于api

回答您的一些问题。

1）初始化下拉列表以便与typeahead一起使用时，source是一个选项。实际上，它是您定义并提供给预先输入的函数，以便它可以获取数据以填充您的下拉列表。

2）map = {};将地图变量初始化为空的javascript对象。 {}是Javascript Object Notation（JSON）。我建议你阅读更多使用javascript。仅使用此行，因为您拥有的示例是从ajax发布结果数据构建国家/地区列表。有很多不同的方法可以执行您的示例正在执行的操作，您甚至可以只为源提供一个对象列表你自己在当地。

3）同样这与typeahead无关，它是与您的示例相关的自定义代码，它在地图对象上创建与country.name匹配的属性，然后将其设置为与{{1}匹配}}

4）我不认为这country个选项已成为先行者的一部分。

5）你只需要一个updater元素并通过jquery在该元素上调用input .. typeahead将完成所有其余的工作。

6）不，您可以为元素调用.typeahead(..)，不需要使用html5数据属性。

7）typeahead有不同的选项来获取来自不同位置的资源..即local：，remote：，prefetch：...我认为现在typeahead试图使用Bloodhound适配器这样做，但它让我很困惑，因为我不喜欢＃39; t目前使用它很多，只使用了v0.9，之前完全不同。

需要了解Bootstrap typeahead js的工作原理

更新

1 个答案: