如何在 twitter typeahead 中通过 id 获取价值？答案

【问题标题】：How to get value by id in twitter typeahead?如何在 twitter typeahead 中通过 id 获取价值？
【发布时间】：2016-03-21 10:57:51
【问题描述】：

我实现了 twitter typeahead 以使用户能够选择他的位置。他键入他的位置name，然后从列表中选择，他选择的位置的id 将发布在表单上。

这很好用，假设我有以下列表：

[
    United States : 1,
    Canada : 2,
    England: 3,
    China: 4,
    India: 5,
    .... // other locations
]

现在用户选择加拿大并提交表单，id 2 保存在数据库中。但是，如果用户返回相同的表单，我会进行查询以获取他选择的位置，在这种情况下，将返回 id 2。

如何在预输入中自动选择加拿大以显示他选择的位置？

我试过了

$('.typeahead').typeahead('val', value) //where value = 2

但这不起作用

【问题讨论】：

我没有收到任何错误，但这只是将2 放入预输入而不是canada
请创建a fiddle。
这是我刚刚创建的一个 js fiddle。小提琴是当您选择一个位置时，获取 id 并在提交表单时将该 id 存储在数据库中。现在，当我需要从 db 中获取保存的数据并显示在 typeahead 中时。小提琴：jsfiddle.net/mu3cxv9w
我不熟悉 typeahead，但你不能只做一个 AJAX 请求来从 JSON 数据中获取名称，并将其添加到输入中吗？ Look at the example.

标签： typeahead.js bootstrap-typeahead twitter-typeahead

【解决方案1】：

因为 typeahead 控件“只是”一个 html 输入，所以没有内置机制用于根据 id 值填充文本值。你必须自己做那部分。

I've created a fiddle to demonstrate.

您可以使用各种不同的方法来完成此操作，但我在实现中使用on focus 来处理它。

.on('focus', function() {
    if (defaultOption.length) {
      var nm = $.map(locs, function(obj) {
        if (obj.id === defaultOption)
          return obj.name; // or return obj.name, whatever.
      });
      console.log(nm);
      $(this).data().ttTypeahead.input.trigger('queryChanged', nm);
    }
  });

在这种情况下，我提供了一个 defaultValue（这将是从数据库返回的值），然后将其作为第一项添加到源中，然后触发查询更改事件。

另一种处理方法是在输入框中简单地预填充期望值。我在链接小提琴的末尾包含了一种处理方法的演示。代码检查默认值，然后使用正确的名称填充输入。

if (defaultOption.length) {
    nm = $.map(locs, function(obj) {
      if (obj.id === defaultOption)
        return obj.name; // or return obj.name, whatever.
    });
  }

  $('.typeahead').val(nm);

【讨论】：

你为什么要硬编码 locs？如果我们需要使用提供的 json api 怎么办？您能否指出我的文档，其中包含有关此部分的更多信息$(this).data().ttTypeahead.input.trigger('queryChanged', nm);。在 typeahead.js 文档中甚至没有 queryChanged 事件。
我正在使用 api 调用。但除非您返回要显示的字符串值，否则您必须查找它。如果您查看代码，您会看到我将默认的“2”映射到名称“Canada”以在文本框中显示“Canada”。
这一行 $(this).data().ttTypeahead.input.trigger('queryChanged', nm); 是一个使用 jQuery 获取完整预输入对象的 hack。它允许您将值推送到搜索结果。