简单介绍

官方地址:bassjobsen/Bootstrap-3-Typeahead: The Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 and Bootstrap 4 (只找到它在 GitHub 上的仓库)


它是什么?简单的说,就是一款自动填充的插件,应用在 input 标签上,当然它远比 input 自带的那个自动填充要高级得多。类似于搜索引擎中搜索框的效果,如下图:


image.png


该插件也可以实现类似的效果,推荐列表数据从何而来,当然是异步请求而来。


引入文件

同样可以采用 bower 包管理安装,安装命令: bower install --save bootstrap3-typeahead ,完成后,引入对应的 js 文件即可。


<!-- bootstrap3-typeahead -->
<script src="/bootstrap3-typeahead/bootstrap3-typeahead.min.js"></script>


HTML 部分

前台页面就是普通的 input 标签,关闭默认自动填充  autocomplete="off",如下示例:


<div class="form-group col-lg-6">
  <label for="" class="control-label">搜索</label>
  <input type="text" name="search" class="form-control" autocomplete="off">
  <p class="help-block">请输入 0-9 的数字</p>
</div>


最终效果如下图:


image.png


JS 调用

调用方式很简单,直接看代码:


$("input[name=search]").typeahead({
  source: function (value, callback) {
    $.get('/ajax/bootstrap3-typeahead/data', function (data) {
      // var rData = [];
      // data.forEach(element => {
      //   rData.push(element.name + ' - ' + element.price)
      // });
      // callback(rData);
      callback(data);
    });
  },
  updater: function (item) {
    $('textarea[name=result]').val(JSON.stringify(item));
  }
});


input 标签调用 typeahead 函数即可,函数里传入参数对象。这里主要讲解两个参数:



如果想要自定义前台列表显示格式,则需要进行数据处理,如示例代码中注释部分,效果图如下:


image.png


后台数据返回

数据返回格式为数组,支持单纯的字符串数组,也可以是包含对象的数组。