twitter bootstrap typeahead ajax示例

Question

我试图找到一个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);
        });
    }
});

Answer 3

从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"链接.

Answer 4

所有响应都引用BootStrap 2 typeahead,它在BootStrap 3中不再存在.

对于在这里寻找使用新的post-Bootstrap Twitter typeahead.js的AJAX示例的其他人,这是一个工作示例.语法有点不同:

$('#mytextquery').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  limit: 12,
  async: true,
  source: function (query, processSync, processAsync) {
    processSync(['This suggestion appears immediately', 'This one too']);
    return $.ajax({
      url: "/ajax/myfilter.php", 
      type: 'GET',
      data: {query: query},
      dataType: 'json',
      success: function (json) {
        // in this example, json is simply an array of strings
        return processAsync(json);
      }
    });
  }
});

此示例使用同步(对processSync的调用)和异步建议,因此您会看到一些选项立即出现,然后添加其他选项.你可以使用其中一个.

有许多可绑定事件和一些非常强大的选项,包括使用对象而不是字符串,在这种情况下,您将使用自己的自定义显示功能将项目呈现为文本.

Answer 5

我用ajax功能增强了原始的typeahead Bootstrap插件.非常好用:

$("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

这是github repo:Ajax-Typeahead

Answer 6

我对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;        
}

工作完美.