autocomplete - twitter bootstrap 3.0 typeahead ajax 示例

Question

有很多用于 bootstrap 2 的预先输入 ajax 示例，例如这里 twitter bootstrap typeahead ajax example .

但是，我使用的是 bootstrap 3，我找不到完整的示例，而是只有一堆不完整的信息片段，其中包含指向其他网站的链接，例如这里 Where is the typeahead JavaScript module in Bootstrap 3 RC 1?

如果您通过ajax从服务器加载数据，每次用户更改输入时，有人可以发布一个关于如何在bootstrap 3中使用typeahead的完整示例。

Answer 1

使用 bootstrap3-typeahead，我让它使用以下代码:

<input id="typeahead-input" type="text" data-provide="typeahead" />

<script type="text/javascript">
jQuery(document).ready(function() {
    $('#typeahead-input').typeahead({
        source: function (query, process) {
            return $.get('search?q=' + query, function (data) {
                return process(data.search_results);
            });
        }
    });
})
</script>

后端提供 search下的搜索服务GET 端点，接收 q 中的查询参数，并以 { 'search_results': ['resultA', 'resultB', ... ] } 格式返回一个 JSON . search_results的元素数组显示在预先输入的输入中。