typeahead模糊搜索查询-结合bootstrap和jquery

本文利用twitter开源组件typeahead来实现一个模糊匹配效果，包含了，动态搜索，迷糊匹配等功能。非常强大。项目地址
项目结合了bootstrap，搜素更加美观

• 项目下载下来，然后引入

  <script src="/assets/plugins/bootstrap/js/typeahead.bundle.min.js" type="text/javascript"></script>

  路径自己看着办，别照抄我的

• 使用

  • html

  <div class="input-group" id="scrollable-dropdown-menu">
                              <input type="hidden"  name="sellerId" id="sellerId" value="">
                              <input type="text" class="form-control typeahead"  id="sellerName" value="">
                              <div class="input-group-btn">
                                  <button type="button" class="btn btn-default dropdown-toggle" id="findSeller">
                                      <span class="caret"></span>
                                  </button>
                                  </ul>
                              </div>
                          </div>

  ​

  • js

  <script type="text/javascript">
  
      var states="";
      var engine=null;//模糊匹配渲染引擎
  
       //页面加载完成之后执行
      $(document).ready(function () {
       
       
          engine = new Bloodhound({
              initialize: false,  //是否初始化，暂不初始化
              identify: function(obj) {
       
        return obj.id; }, //可以通过id进行辨识
              datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),//检索name字段{id:"1",name:"hello"}这种形式
              queryTokenizer: Bloodhound.tokenizers.whitespace,//默认
              local: states  //从本地加载
          });
  
          function nflTeamsWithDefaults(q, sync) {
       
       
              if (q === '') {
                  //sync(engine.get('5000', '2', '102165','102166')); 通过id去拿
                  sync(engine.all());//直接拿全部
              }
              else {
                  engine.search(q, sync);//进行按照搜索
              }
          }
  
          //为ID 为scrollable-dropdown-menu 的typeahead设置一些属性
          $('#scrollable-dropdown-menu .typeahead').typeahead({
              minLength: 0,  //最小长度为0的时候就启用搜索
              highlight:true //是否高亮
          }, {
              display:"name",