jquery-ui - 从 Jquery-ui 自动完成到 typeahead.js

Question

我正在将我的应用程序迁移到 twitter-bootstrap，我想用 typeahead.js 替换我的 jquery-ui 自动完成功能。

使用嵌入在 twitter-bootstrap 中的功能会更好，但如果需要，我可以使用额外的 typeahead 插件。

我的问题是我无法重现当前行为，尤其是在没有结果的情况下。

你会怎么做这样的事情？

$("#search").autocomplete({
           source : myUrl,
            delay : 100,
            minLength : 2,
            select : function(event, ui) {
              // do whatever i want with the selected item
            },

            response : function(event, ui) {
                if (ui.content.length === 0) {
                    ui.content.push({
                        label : "No result",
                        value : customValue
                    });
                }
            }
        });

基本上，如果没有结果，我想在组件中显示自定义消息。

谢谢!

Answer 1

向 Bootstrap 预输入的迁移看起来像..

$('.typeahead').typeahead({
  minLength:2,
  updater: function (item) {
     /* do whatever you want with the selected item */

    },
  source: function (typeahead, query) {
     /* put your ajax call here..
     return $.get('/typeahead', { query: query }, function (data) {
        return typeahead.process(data);
     });
     */      
    }
});

编辑:

我已更新演示以包含 分拣机 和 荧光笔 .我认为这会给你你想要的结果..

  sorter: function(items) {
    if (items.length == 0) {
        var noResult = new Object();
        items.push(noResult);
    }
    return items;    
    },
  highlighter: function(item) {
    if (dataSource.indexOf(item) == -1) {
        return "<span>No Match Found.</span>";
    }
    else {
       return "<span>"+item+"</span>";
    }
  },

Bootstrap Typeahead Demo

我不认为 typeahead 相当于延迟，但是有一些 jquery 解决方法。