jquery - Twitter bootstrap typeahead ajax 示例

Question

我正在尝试找到 twitter bootstrap typeahead 的工作示例将进行 ajax 调用以填充其下拉列表的元素。

我有一个现有的工作 jquery 自动完成示例，它定义了 ajax url 以及如何处理回复

<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];
                }
            );
       ..

我需要更改什么才能将其转换为提前输入示例？

<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];
                }
            );
       ..

我要等待 ' Add remote sources support for typeahead ' 待解决的问题。

Answer 1

编辑:typeahead 不再捆绑在 Bootstrap 3 中。查看:

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

从 Bootstrap 2.1.0 到 2.3.2，你可以这样做:

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

像这样使用 JSON 数据:

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

请注意，JSON 数据必须是正确的 mime 类型(application/json)，以便 jQuery 将其识别为 JSON。