Typeahead 3 和 Bootstrap - 自动完成名称和 ID答案

【问题标题】：Typeahead 3 and Bootstrap - Autocomplete Name & IDTypeahead 3 和 Bootstrap - 自动完成名称和 ID
【发布时间】：2015-01-16 12:03:33
【问题描述】：

我只是一个初级程序员——用 PHP 和 jQuery 编写。

我正在尝试在我的网站中设置一个带有文本框的自动完成字段，当人们开始输入时，它会从用户和相关 ID 号的 PHP 页面中获取结果。

我将它与 tagsinput 结合起来——我基本上希望它像 Gmail——输入某人的名字，然后让他们显示为标签。我需要能够访问数据（尤其是 ID - 因为在选择名称后，我将根据这些 ID 向电子邮件用户编写代码）。

虽然我无法准确理解我需要做什么 - 我一直对不同的 Typeahead 插件感到困惑 - 因为我的网站使用 Bootstrap 3。

据我了解 - 我必须使用 bootstrap3-typeahead.min.js 文件才能使用。这包含在我的页面中。

据我所知，大部分工作已经完成——我的 ajax 调用返回了正确的结果，但选项没有按照我的需要显示在屏幕上——并且我收到“TypeError：g是未定义的”Firebug 中的错误。

这是我目前为止的工作（我可以发布任何其他需要的内容）：

$('#user_name').tagsinput({
  typeahead: {
    source: function(query) {
      var fetched = $.get('group.php?pa=ajax_get_users&term='+query);
      console.log(fetched);
    }
  }
})

上面引用的页面返回一个 json 编码的名称和 ID 数组，并且似乎可以正常工作。使用萤火虫，我可以看到（例如） - 当我在字段中输入“to”时，它会进行调用并返回以下内容：

[{"label":"Toby Behan","id":"2"},{"label":"Toby Behan","id":"3126"},{"label":"Tommy Streisand","id":"3144"}]

console.log() 函数显示在 Firebug 中返回的有效对象。

我需要做什么才能在下拉和选择方面正确显示？

感谢您的帮助。

【问题讨论】：

标签： jquery twitter-bootstrap-3 bootstrap-typeahead bootstrap-tags-input

【解决方案1】：

虽然我无法确切地理解我需要做什么 - 我一直与不同的 Typeahead 插件混淆 - 因为我的网站使用引导程序 3。

我认为您将不得不在 Bootstrap 3 Typeahead 和 typeahead.js 之间进行选择。这两个插件都应该可以工作，但你应该只使用其中一个。

您的主要问题似乎是您的 group.php 返回一个对象数组，而标签输入需要一个值数组。您可以使用 jQuery.map() 来隐藏这些值。

所以当使用 Bootstrap 3 Typeahead 时：

$('input').tagsinput({
  typeahead: {                  
    source: function(query) {
      return $.map($.get('group.php?pa=ajax_get_users&term='+query)function(values){return values.label;});
    }
  }
});

另见https://github.com/bassjobsen/Bootstrap-3-Typeahead#bootstrap-tags-input和https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/33#issuecomment-38047656

关于typeahead.js，请参阅https://gist.githubusercontent.com/jharding/9458749/raw/bloodhound.js了解如何使用$.map

【讨论】：