为什么我的预输入结果中未定义？答案

【问题标题】：Why am I getting undefined in my typeahead results?为什么我的预输入结果中未定义？
【发布时间】：2023-03-17 05:10:01
【问题描述】：

我正在尝试使用 ajax 调用让这个 typeahead 工作，我很接近但卡住了。

目前，它在下拉列表中返回 5 个“未定义”项目的列表。我尝试将我的 ajax 响应格式化为数组和 json 编码。

我已经测试了响应 ajax 调用的 php 资源，当我加载这个 uri 时：

/search?searchField=apple

在我的浏览器中使用搜索词，我会得到以下格式的正确结果：

["Apple American Group","Apple Financial Holdings Inc","Apple Inc","Appleton Coated LLC","Appleton Inc","Appleton Papers Inc","Dr Pepper Snapple Group Inc","Maui Land & Pineapple Co Inc","Red Apple Group Inc"]

我可以从控制台输出中看到 ajax 调用正在被触发并成功：

XHR finished loading: GET "http://cha.dev:8000/search?searchField=a". jquery.js:9631
send jquery.js:9631
jQuery.extend.ajax jquery.js:9176
b.mixin._get typeahead.bundle.min.js:7
f

HTML：

<div class="form-group" id="bloodhound">
<input type="text" name="searchField" class="form-control typeahead" id="searchId" autocomplete="off" spellcheck="off">
</div>

<!-- just before close of body tag -->
<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/typeahead.bundle.min.js"></script>
<script src="js/main.js"></script>

JavaScript：

    var businesses = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'search?searchField=%QUERY'
});

businesses.initialize();

$('#searchId').typeahead(null, {
    name: 'businessList',
    displayKey: 'value',
    source: businesses.ttAdapter()
});

感谢您提供的任何帮助。

【问题讨论】：

当我添加花括号时，下拉结果根本不会出现。当我在浏览器中加载它时，我会得到一个标题以及数据，它说它是 Content-Type: application/json.
{["Apple Inc", "Appleton Inc", "etc"]}

标签： php jquery ajax typeahead bloodhound

【解决方案1】：

key 是返回的 JSON 的重要部分。下面的例子使用business 作为key。

Javascript：

var businesses = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('business'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'search?searchField=%QUERY'
});

businesses.initialize();

$('#searchId').typeahead(null, {
    name: 'businessList',
    displayKey: 'business',
    source: businesses.ttAdapter()
});

应返回的数据：

[ { "business": "Apple American Group"},
  { "business": "Apple Financial Holdings Inc"},
  { "business": "Apple Inc"},
  { "business": "Appleton Coated LLC"},
  { "business": "Appleton Inc"},
  { "business": "Appleton Papers Inc"},
  { "business": "Dr Pepper Snapple Group Inc"},
  { "business": "Maui Land & Pineapple Co Inc"},
  { "business": "Red Apple Group Inc"} ]

【讨论】：