Bootstrap 4 Typeahead

问题描述 投票:5回答:1

我正在使用jQuery Bootstrap Typeahead。我从我的文件中获取数据但是没有填充/显示typeahead下拉列表。

这是我的JS:

(function() {
    "use strict";

    var $input = $('.typeahead');

    $('.typeahead').typeahead({
        source: function (query, process) {
            return $.getJSON(
                'url-to-file.php',
                { query: query },
                function (data) {
                    console.log(data)
                    return process(data);
                })
        }
    });

})();

console.log()返回一个(正确的)JSON数组:

[ "item1", "item2", ... ]

但我不知道该怎么办。谢谢你的帮助

javascript jquery twitter-bootstrap bootstrap-4 bootstrap-typeahead
1个回答
4
投票

数据源应该是......

[{name:"item1","id":"1"},{name:"item2","id":"2"},etc..]

然后在这样的输入上使用data-provide ......

   <div class="input-group">
       <input type="text" data-provide="typeahead" class="form-control typeahead border-primary" name="query" id="query" placeholder="search..." autocomplete="off">
   </div>

Working Demo on Codeply


编辑:您还可以使用简单的字符串数组:https://www.codeply.com/go/knBpcbhlFE

© www.soinside.com 2019 - 2024. All rights reserved.