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添加远程源支持”问题得到解决。

当前回答

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

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

这里是github回购:Ajax-Typeahead

2012-05-05 23:41:27

其他回答

可以使用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

您可以使用支持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

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

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

这里是github回购:Ajax-Typeahead

2012-05-05 23:41:27

当使用ajax，尝试$. getjson()而不是$.get()如果你有问题的正确显示结果。

在我的情况下，当我使用$.get()时，我只得到每个结果的第一个字符，尽管我使用json_encode()服务器端。

2013-05-16 07:42:38

如果你的服务没有返回正确的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

Twitter引导typeahead ajax示例

推荐文章

最新文章

标签