Question

我只是一名基础程序员 - 用PHP和jQuery编写。

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

我将它与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数组，似乎可以工作。使用firebug，我可以看到（例如） - 当我在字段中键入'to'时，它会调用并返回以下内容：

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

console.log（）函数显示Firebug中返回的有效对象。

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

感谢您的帮助。

Answer 1

我无法理解我到底需要做什么 - 我一直都是与不同的Typeahead插件混淆 - 因为我的网站使用 Bootstrap 3。

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

您的主要问题似乎是group.php返回一个对象数组，而tags-input需要一组值。您可以使用 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

Typeahead 3和Bootstrap - 自动完成名称＆amp; ID

1 个答案: