Bootstrap 3 提前输入 Ajax

Question

我正在使用 https://github.com/bassjobsen/Bootstrap-3-Typeahead

我的代码：

<input type="text" class="typeahead" autocomplete="off">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.typeahead').typeahead({
        autoSelect: true,
        minLength: 2,
        delay: 400,
        source: function (query, process) {
            $.ajax({
                url: '/search/searchCities',
                data: {q: query},
                dataType: 'json'
            })
                .done(function(response) {
                    console.log(response.data);
                    return process(response.data);
                });
        }
    });
});
</script>

我的后端代码 returns 一个 json 对象，例如

{status: "OK", data: ["Moscow", "New York", "Odessa"]}

通过 php 代码

<?= echo json_encode(["status" => "OK", "data" => ["Moscow", "New York", "Odessa"]]) ?>

在我输入 2 个或更多字母后，浏览器控制台出现这样的错误

GET http://localhost/search/searchCities?q=mo 200 OK
TypeError: a is undefined
...rep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==...

jquery.min.js (row 2, col 3476)
["Moscow"]

我看到带有 "Moscow" 选项的下拉菜单，我可以选择它，如果我没有在控制台中收到错误，一切都会好起来的。请告诉我我的错误。

我尝试使用 jquery.js（不是最小版本）。错误是

TypeError: elems is undefined
length = elems.length,

jquery.js (row 459, col 4)

我猜是数据类型有问题，但我自己找不到。

Answer 1

原来是bootstrap 3有错误-typeahead.min.js 如果我使用 bootstrap 3-typeahead.js - 浏览器控制台中没有错误。

Bootstrap 3 提前输入 Ajax

Bootstrap 3 Typeahead Ajax

ajax

jquery

twitter-bootstrap

bootstrap-typeahead