Twitter的引导3.0预输入例如AJAX [英] twitter bootstrap 3.0 typeahead ajax example

问题描述

有大量的预输入ajax的例子在那里为引导2，如该位置微博引导预输入阿贾克斯例如。

There are a lot of typeahead ajax examples out there for bootstrap 2, for example this here twitter bootstrap typeahead ajax example.

不过我使用引导3和我找不到一个完整的例子，取而代之的仅仅是一堆链接到其他网站的信息不完整的片段，例如这个在这里<一个href=\"http://stackoverflow.com/questions/17903645/where-is-the-typeahead-javascript-module-in-bootstrap-3-rc-1\">Where是预输入的JavaScript模块中的引导3 RC 1？

However I am using bootstrap 3 and I could not find a complete example, instead there are just a bunch of incomplete information snippets with links to other websites, for example this here Where is the typeahead javascript module in bootstrap 3 RC 1?

可能有人请张贴在如何从服务器通过AJAX，用户改变输入每次使用预输入自举3，如果你加载数据进行全面工作的例子。

Could someone please post a fully working example on how to use typeahead with bootstrap 3, if you load the data from the server via ajax, every time the user changes the input.

推荐答案

通过bootstrap3-预输入，我把它与下面code工作：

With bootstrap3-typeahead, I made it to work with the following code:

<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>

后端提供了搜索 GET端点，接收在①参数查询，并返回在搜索服务在格式的JSON {'search_results'：'resultA'，'resultB'，...]} 。在 search_results 数组的元素显示在预输入的输入。

The backend provides search service under the search GET endpoint, receiving the query in the q parameter, and returns a JSON in the format { 'search_results': ['resultA', 'resultB', ... ] }. The elements of the search_resultsarray are displayed in the typeahead input.

这篇关于Twitter的引导3.0预输入例如AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！