我试图找到一个工作的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添加远程源支持”问题得到解决。


当前回答

更新:我修改了我的代码使用这个分叉

也不是使用$。每一个我都换成了$。由托米斯拉夫·马可夫斯基推荐的地图

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

然而,我遇到了一些问题

无法调用undefined的方法“toLowerCase”

正如你在一个新的帖子上看到的,我正在试图弄清楚

希望这个更新对你有任何帮助…

其他回答

从Bootstrap 2.1.0开始:

HTML:

<input type='text' class='ajax-typeahead' data-link='your-json-link' />

Javascript:

$('.ajax-typeahead').typeahead({
    source: function(query, process) {
        return $.ajax({
            url: $(this)[0].$element[0].dataset.link,
            type: 'get',
            data: {query: query},
            dataType: 'json',
            success: function(json) {
                return typeof json.options == 'undefined' ? false : process(json.options);
            }
        });
    }
});

现在您可以创建统一的代码,在html代码中放置“json-request”链接。

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

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

编辑: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。

对于那些正在寻找公认答案的咖啡脚本版本的人:

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options

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

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