twitter bootstrap typeahead ajax示例

小编典典

twitter bootstrap typeahead ajax示例

all

我正在尝试找到一个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];
                }
            );
       ..

我将等待“为预输入添加远程源支持”问题得到解决。

阅读 81

2022-04-29

共1个答案

小编典典

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

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。

2022-04-29