Typeahead 远程数据未显示在文本字段中，但本地数据有效

Question

已经试了一段时间了，找不到这个问题的答案。 Typeahead 适用于本地数据，但不适用于远程数据。虽然我在控制台中看到了请求，但它没有 return 任何数据输入 typeahead。

在我输入的控制台中，我得到：

XHR finished loading: GET "http://mypath/msqCity.php?City=ne"
XHR finished loading: GET "http://mypath/msqCity.php?City=new"

等我打字。但是预输入字段中没有任何内容。

我有一个 PHP 页面，上面有一个查询。查询页面工作正常并且 returns 数据。我注意到的是数组的键值用双引号而不是单引号显示。

我在结果上使用 json_encode，它输出

[{"City":"New York","StateProvince":"NY","Country":"US"},
 {"City":"Newton","StateProvince":"MA","Country":"US"},
 {"City":"New Orleans","StateProvince":"LA","Country":"US"}...]

我试过停止双引号并得到：

[{City:"New York",StateProvince:"NY",Country:"US"},
 {City:"Newton",StateProvince:"MA",Country:"US"},
 {City:"New Orleans",StateProvince:"LA",Country:"US"}...]

这些都不是远程工作。

如果我在 typeahead 上将数据放到本地并粘贴几条记录，就可以了。

<body>
    <div id="remote">
        <input class="typeahead" type="text" placeholder="Enter City">
    </div>
    <script type="text/javascript">

        var cities = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('City'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            /* local:    [{
                           City: 'Hartford',
                           StateProvince: 'CT',
                           Country : 'US'
                       },
                       {
                           City: 'Trumbull',
                           StateProvince: 'CT',
                           Country: 'US'
                       },
                       {
                           City: 'New York',
                           StateProvince: 'NY',
                           Country: 'US'
                       },
                        {
                           City: 'New Britain',
                           StateProvince: 'CT',
                           Country: 'US'
                       }
                   ]});   */
        prefetch: 'ScriptLibrary/msqCity.php',
        remote: {
            url: 'ScriptLibrary/msqCity.php?City=%QUERY',
            wildcard: '%QUERY'
            }
        });

        $('#remote .typeahead').typeahead(null, {
            name: 'City',
            display: 'City',
            source: cities
        });
    </script>
</body>

任何方向将不胜感激。

Answer 1

问题是查询在带有 html 的 php 页面中。我去掉了所有的html，只留下查询，现在可以了。

Typeahead 远程数据未显示在文本字段中，但本地数据有效

Typeahead remote data no showing in text field, but local data works

jquery

typeahead

bootstrap-typeahead

typeahead.js

bloodhound