Twitter引导typeahead ajax示例

我试图找到一个工作的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];
                }
            );
       ..

我需要改变什么来转换这到typeahead的例子?

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

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

当前回答

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

在Bootstrap 3 RC 1中输入JavaScript模块在哪里? 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。

2012-08-23 18:27:09

其他回答

我用ajax功能增强了原始的typeahead Bootstrap插件。非常容易使用:

$("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

这里是github回购:Ajax-Typeahead

2012-05-05 23:41:27

如果你的服务没有返回正确的application/json内容类型头，试试这个方法:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            var json = JSON.parse(data); // string to json
            return process(json.options);
        });
    }
});

2015-09-16 22:43:03

您可以使用支持ajax调用的BS Typeahead fork。然后你就可以这样写了:

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

2012-02-24 17:39:20

我正在用这个方法

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
    {
    name: 'options',
    displayKey: 'value',
    source: function (query, process) {
        return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) {
            var matches = [];
            $.each(data, function(i, str) {
                matches.push({ value: str });
            });
            return process(matches);

        },'json');
    }
});

2014-12-22 19:14:19

可以使用Bootstrap进行调用。当前版本没有任何源代码更新问题麻烦更新Bootstrap的输入前数据源与后响应，也就是说，bootstrap的源代码一旦更新，就可以再次修改。

请参考下面的例子:

jQuery('#help').typeahead({
    source : function(query, process) {
        jQuery.ajax({
            url : "urltobefetched",
            type : 'GET',
            data : {
                "query" : query
            },
            dataType : 'json',
            success : function(json) {
                process(json);
            }
        });
    },
    minLength : 1,
});

2013-05-07 19:25:39

Twitter引导typeahead ajax示例

推荐文章

最新文章

标签