Twitter Typeahead的Ajax结果未定义

Question

我正在使用Twitter typeahead构建一个自动完成功能，使用ajax JSON调用我的PHP文件来获取一些数据，但它一直在下拉结果列表中显示以下内容：

未定义

未定义

未定义

但当我执行以下操作时：

alert(data); 

我成功显示了正确的数据，但是自动补全列表仍然显示为undefined。我已经阅读并尝试过StackOverflow上的多篇文章，但似乎无法让它正常工作。

以下是我的jquery代码：

      $('.item-name .typeahead').typeahead(null,{
      source: function (query, process) {
        $.ajax({
          url: 'ajaxItems.php',
          type: 'POST',
          dataType: 'JSON',
          data: 'query=' + query,
          success: function(data) {
            // alert(data);
            process(data);
          }
        });
      }
    });

我的ajaxItems.php文件用于测试，代码如下：

<?PHP
$results = array();

$results[] = 'jeans';
$results[] = 'sweater';

$json =  json_encode($results);
print_r($json);
?>

JSON输出如下：

["jeans","sweater"]

我希望有人能为我指点迷津或指引方向。编辑：我正在使用以下typeahead文件：http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js。

- Adriaan

---

我在哪里可以找到这个？这只是typeahead或bootstrap处理函数来显示结果。 - Adriaan

@Rikesh，process()是typehead代码的一部分。 - davidkonrad

抱歉，那我就卡住了 :( 这是来自 Twitter Bootstrap 的 Typeahead 吗？ - davidkonrad

是的，它就是 Twitter Typeahead。 - Adriaan

这是使用 Bootstrap 3x 并且只包含 Twitter 官方的 typeahead 插件。 - Adriaan

Answer 1

最接近答案的是 Ian 的回答，但它并不真正起作用（只返回最后一个值）。有效的答案是：

[{'value': 'first'}, {'value': 'second'}, {'value': 'third'}]

- JC Boggio

Answer 2

我遇到了完全相同的问题。为了解决它，我必须返回一个包含键/值对的数组，其中键是'value'，就像这样：

[{'value': 'first', 'value': 'second', 'value': 'third'}]

我认为typeahead文档没有表述清楚，但我相信默认情况下设置为'value'的是displayKey选项。

- Ian

---

谢谢！我也有同样的问题。ASP.Net MVC应用程序从LINQ查询返回一个字符串数组："return Json((from i in elementArray select i.StringProperty), JsonRequestBehavior.AllowGet);" 它返回：["A String", "Another String", "Other String"]。Typehead只接受这种格式：[{Name: "A String"}, {Name: "Another String"}]。这可以通过将LINQ select更改为匿名类型来实现："... select new {Name = i.StringProperty}"，然后在typehead声明中指定displayKey：" .typehead({displayKey: 'Name', source: ..." - Luis

这个答案也解决了我的问题。 - dance2die

Answer 3

我遇到了类似的问题，使用source:时出现了问题，最终我使用了remote:。在你的情况下，应该像这样：

$('.item-name .typeahead').typeahead({
    remote: 'ajaxItems.php?query=%QUERY'
  });

请注意，我在typeahead(null,{中删除了null，因为我认为它不是必要的，但我可能是错的。显然，您将不得不使用$_GET而不是$_POST，但我认为这样更容易。

- lucascurti

Answer 4

问题在于 typeahead 期望一个包含建议的数组，而不是 JSON！

请像这样使用 $.makeArray()：

success: function(data){
     process($.makeArray(data));
}

如果不行，也许可以尝试使用JSON.parse()？

如果有帮助，请将其标记为答案:)

- Amit Joki

---

我尝试过了，没有任何改变，仍然是未定义的未定义。 - Adriaan

它不起作用，但你是对的 - 它就是出问题了。我未能解决使用$.ajax的JSON的问题。 - davidkonrad

@Adriaan，你试过使用JSON.parse()吗？ - Amit Joki

@davidkonrad 你试过使用 JSON.parse() 吗？ - Amit Joki