twitter bootstrap typeahead ajax示例

Question

twitter bootstrap 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];                 }             );        ..我将等待“ 添加远程源支持预先输入 ”问题得到解决。

Answer 1

在bootstrap 3中不再捆绑typeahead。退房：

• Bootstrap 3 RC 1中的typeahead 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。

Answer 2

您可以使用支持ajax调用的BS Typeahead fork。然后你就可以写：

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