twitter bootstrap 3.0 typeahead ajax示例

Question

对于bootstrap 2有很多类型的ajax示例,例如这里的twitter bootstrap typeahead ajax示例.

但是我使用bootstrap 3并且我找不到完整的示例,而是只有一堆不完整的信息片段,其中包含指向其他网站的链接,例如,这里的Bootstrap 3 RC 1中的typeahead JavaScript模块在哪里？

如果您每次用户更改输入时通过ajax从服务器加载数据,有人可以发布一个完整的工作示例,说明如何使用带引导程序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>

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