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);         });     }});