可以使用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,
});

我对jquery-ui.min.js做了一些修改:

//Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(...

// Line 328 ORIG:
this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr...
// NEW:this.element.attr....

// Line 329 ORIG:
this.active=a.eq(0).children("a")
this.active.children("a")
// NEW:
this.active=a.eq(0).addClass("active").children("a")
this.active.removeClass("active").children("a")`

并添加以下CSS

.dropdown-menu {
    max-width: 920px;
}
.ui-menu-item {
    cursor: pointer;        
}

完美的工作。

我浏览了这篇文章，一切都不想正常工作，最终从几个答案拼凑在一起，所以我有一个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>

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

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

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

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

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

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

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

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