twitter bootstrap typeahead ajax示例 [英] twitter bootstrap typeahead ajax example

问题描述

我正在尝试找到 twitter bootstrap typeahead 元素的有效示例， ajax调用来填充它的下拉列表.

I'm trying to find a working example of the twitter bootstrap typeahead element that will make an ajax call to populate it's dropdown.

我有一个现有的有效的jquery自动完成示例，该示例定义了ajax网址以及如何处理回复

I have an existing working jquery autocomplete example which defines the ajax url to and how to process the reply

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

我需要进行哪些更改才能将其转换为预输入示例?

What do i need change to convert this to the typeahead example?

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

我将等待解决"添加对预输入的远程源支持"问题.

I'm going to wait for the 'Add remote sources support for typeahead' issue to be resolved.

推荐答案

typeshead不再捆绑在Bootstrap 3中.签出:

typeahead is no longer bundled in Bootstrap 3. Check out:

• 其中的typeahead JavaScript模块在哪里Bootstrap 3 RC 1?
• typeahead.js

• Where is the typeahead JavaScript module in Bootstrap 3 RC 1?
• typeahead.js

从Bootstrap 2.1.0到2.3.2为止，您可以执行以下操作:

As of Bootstrap 2.1.0 up to 2.3.2, you can do this:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            return process(data.options);
        });
    }
});

要像这样使用JSON数据:

To consume JSON data like this:

{
    "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5"
    ]
}

请注意，JSON数据必须具有正确的mime类型(application/json)，因此jQuery会将其识别为JSON.

Note that the JSON data must be of the right mime type (application/json) so jQuery recognizes it as JSON.

这篇关于twitter bootstrap typeahead ajax示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！