需要了解 Bootstrap typeahead js 是如何工作的

Question

我正在寻找一个好的 jQuery 自动建议列表插件。我在 Google 上搜索了很多，但 Bootstrap 预输入插件看起来不错。我使用了 Bootstrap typeahead，但在一个区域无法正确理解。

我从这个 url http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/

了解了 Bootstrap typeahead 的使用

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;
}

1. 我想知道什么时候会调用源函数以及什么时候是函数然后有人需要调用它...那么谁调用这个源函数？
2. var countries = []; map = {}; 我可以理解国家是数组，但 map = {} 是什么？为什么需要map = {}？如果我省略这个map = {}，会发生什么？
3. 为什么我们需要写这行？ map[country.Name] = country;

4. 更新程序在做什么以及何时调用？

   更新程序：功能（项目）{ var selectedShortCode = map[item].ShortCode;

   // 将文本设置为我们选择的 id $("#details").text("已选：" + selectedShortCode); 归还物品; }

5. 自动建议列表显示在图片中。此列表的 div 将由此插件自动生成，还是我们需要在页面中放置任何 div？

6. <input type="text" id="Search" data-provide="typeahead" placeholder="Client Name" autocomplete="off" /> 它是强制性的 data-provide="typeahead" 吗？如果我错过了这个属性，那么插件会起作用吗？从上面的 url 中看到这个 url http://www.arungudelli.com/asp-net-mvc/jquery-autocomplete-using-asp-net-mvc/ 我看到这个人没有使用data-provide="typeahead" 属性。

7. 我看到有人用过这个remote: 'Home/GetData?q=%QUERY',，很少有人没用过。

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

更新

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

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

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

map[country.Name] = country;这段代码是什么意思？地图对象会有什么样的数据？

10) 你说：- typeahead 有不同的选项来从不同位置获取源.. 即 local:、remote:、prefetch: ...我认为现在 typeahead 尝试使用 Bloodhound 适配器来做到这一点，但它相当令人困惑我是因为我现在用的不多，只用了 v0.9，以前的做法完全不同。

您能否为来自不同位置的每种来源提供一个示例。我需要一些本地：、远程：、预取等的使用示例。

但是，如果您看到我的示例，那么您会注意到 jquery $post() 函数是如何用于获取数据的，所以我想知道人们何时应该使用这些方法 local:、remote:、prefetch 等来获取数据？

11) 您询问了 json 数据的外观。所以这里是以json格式粘贴从服务器获取的数据

{"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 对于 api

回答您的一些问题。

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

2) map = {}; 将映射变量初始化为空的 javascript 对象。 {} 是 Javascript 对象表示法 (JSON)。我建议您阅读更多关于使用 javascript 的内容。仅使用此行是因为您的示例是从 ajax 发布结果数据构建国家列表。有很多不同的方法可以执行您的示例正在执行的操作，您甚至可以只为源提供对象列表你自己在本地。

3) 同样，这与预先输入无关，它是与您的示例相关的自定义代码，它在地图对象上创建一个与country.name 匹配的属性，然后将其设置为与country 匹配

4) 我认为 updater 选项不再是 typeahead 的一部分。

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

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

7) typeahead 有不同的选项用于从不同位置获取源.. 即 local:、remote:、prefetch: ...我认为现在 typeahead 尝试使用 Bloodhound 适配器来做到这一点，但这让我很困惑，因为我不知道目前使用的不多，只使用了 v0.9，之前的做法完全不同。