我试图找到一个工作的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。

其他回答

我浏览了这篇文章,一切都不想正常工作,最终从几个答案拼凑在一起,所以我有一个100%的工作演示,并将它粘贴在这里作为参考-粘贴到一个php文件,并确保包含在正确的位置。

<?php if (isset($_GET['typeahead'])){
    die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('index.php?typeahead', { query: query }, function (data) {
            return process(JSON.parse(data).options);
        });
    }
});
</script>

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

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

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

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

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

$('#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”链接。