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

Jquery ui 从Jquery ui自动完成到typeahead.js,jquery-ui,twitter-bootstrap,bootstrap-typeahead,typeahead.js,Jquery Ui,Twitter Bootstrap,Bootstrap Typeahead,Typeahead.js,我正在将我的应用程序迁移到twitter引导,我想用typeahead.js替换我的jquery ui自动完成 最好使用twitter引导中嵌入的功能,但如果需要,我可以使用额外的typeahead插件 我的问题是,我很难重现当前的行为,尤其是在没有结果的情况下 你会怎么做那样的事 $("#search").autocomplete({ source : myUrl, delay : 100, minLength : 2,

我正在将我的应用程序迁移到twitter引导,我想用typeahead.js替换我的jquery ui自动完成

最好使用twitter引导中嵌入的功能,但如果需要,我可以使用额外的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
                    });
                }
            }
        });
基本上,如果没有结果,我希望在组件中显示一条自定义消息


谢谢

迁移到Bootstrap typeahead看起来像

$('.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>";
    }
  },
分拣机:功能(项目){
如果(items.length==0){
var noResult=新对象();
项目。推送(noResult);
}
退货项目;
},
荧光灯:功能(项目){
if(dataSource.indexOf(item)=-1){
返回“未找到匹配项。”;
}
否则{
返回“+项目+”;
}
},

我认为typeahead没有延迟的等价物,但是jquery对此有一些变通方法。

最新版本的typeahead.js(0.10)现在可以指定一个空模板,以便在找不到结果时显示

   $('.typeahead').typeahead({
     hint: true,
     highlight: true,
     minLength: 2
    },{
      name: 'examples',
      source: examples.ttAdapter(),
      templates: {
        empty: [
          '<div class="empty-message">',
          'unable to find any results that match the current query',
          '</div>'
        ].join('\n')
      }
    });
$('.typeahead')。typeahead({
提示:没错,
推荐理由:没错,
最小长度:2
},{
名称:'示例',
来源:examples.ttAdapter(),
模板:{
空的:[
'',
'找不到与当前查询匹配的任何结果',
''
].join(“\n”)
}
});

你看到这个问题了吗:?我想了很久,我意识到这个答案是不够的。让typeahead显示“no matches”是一个完全不同的问题,我不确定Bootstrap typeahead.js是否能工作。也许有一种方法可以通过“匹配”功能实现。我对它进行了更多的操作并编辑了我的答案。。再次查看演示:谢谢您的编辑;)我会尽快跟随你的。