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

我使用$().one() 为了解决这个问题; 当页面加载，我发送ajax到服务器，等待完成。 然后将结果传递给函数。$().one()是重要的。因为强制typehead.js附加到输入一次。 很抱歉写得不好。

(($) => { var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; var states = []; $.ajax({ url: 'https://baconipsum.com/api/?type=meat-and-filler', type: 'get' }).done(function(data) { $('.typeahead').one().typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', source: substringMatcher(data) }); }) })(jQuery); .tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */ .tt-hint { width: 396px; height: 30px; padding: 8px 12px; font-size: 24px; line-height: 30px; border: 2px solid #ccc; border-radius: 8px; outline: none; } .tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { color: #999; } .tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */ width: 422px; margin-top: 12px; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; cursor: pointer; } .tt-suggestion:hover { color: #f0f0f0; background-color: #0097cf; } .tt-suggestion p { margin: 0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script> <input class="typeahead" type="text" placeholder="where ?">

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

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

我没有一个可行的例子，也没有一个非常清晰的解决方案，但让我告诉你我的发现。

如果你看一下TypeAhead的javascript代码，它是这样的:

items = $.grep(this.source, function (item) {
    if (that.matcher(item)) return item
  })

这段代码使用jQuery“grep”方法来匹配源数组中的元素。我没有看到任何可以在AJAX调用中挂钩的地方，所以没有一个“干净”的解决方案。

However, one somewhat hacky way that you can do this is to take advantage of the way the grep method works in jQuery. The first argument to grep is the source array and the second argument is a function that is used to match the source array (notice Bootstrap calls the "matcher" you provided when you initialized it). What you could do is set the source to a dummy one-element array and define the matcher as a function with an AJAX call in it. That way, it will run the AJAX call just once (since your source array only has one element in it).

这种解决方案不仅很棘手，而且还会出现性能问题，因为TypeAhead代码被设计为对每一次按键都进行查找(AJAX调用实际上应该只在每几次按键或在一定的空闲时间之后发生)。我的建议是尝试一下，但是坚持使用不同的自动补全库，或者如果遇到任何问题，只在非ajax的情况下使用它。

从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”链接。