0

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

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

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

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

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

据我所见，大部分工作已经完成——我的 ajax 调用返回了正确的结果，但选项没有按照我的需要显示在屏幕上——我得到一个“TypeError：g is undefined”萤火虫中的错误。

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

$('#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 中返回的有效对象。

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

谢谢你的帮助。

4

1 回答 1

1

不过，我无法准确理解我需要做什么——我一直对不同的 Typeahead 插件感到困惑——因为我的网站使用 Bootstrap 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

于 2014-11-20T15:58:10.787 回答