bs_typeadhead - 文本框关键字自动补全插件

此插件基于bootstrap

1. 首先引入三大部分的依赖jquery、bootstrap、bs_typeadhead

   <%--    jquery--%>
       <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
   
       <!--  bootstrap -->
       <link rel="stylesheet" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
       <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
   
   <%--    bs_typeadhead--%>
       <script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>

1. 页面添加一个div容器

   <input type="text" id="customerName">

2. 在入口函数，对容器注册bs_typeadhead 函数

部分说明：typeahead( ) 函数的source属性就是自动补全的数据的来源，来源分为静态数据和动态数据。

• 静态数据：可以是数组 [ ]。

  • 动态数据：source是一个函数，里面是ajax请求，请求的结果必须是可遍历的json对象

  <script type="text/javascript">
          $(function (){
             $("#customerName").typeahead({
                 //数据的来源-静态
                 // source:['京东商城','阿里巴巴','百度科技公司','字节跳动','动力节点']
                 //数据的来源-动态
                 source:function(jquery,process){
                                                  //参数列表里的process是一个函数，作用是把ajax返回的data赋值给属性source。
                                                  //用户在容器中获取的关键字
                      //发送请求
                     $.ajax({
                         url:'workbench/transaction/queryCustomerNameByName.do?customerName'+jquery,
                         type:'post',
                         dataType:'json',
                         success:function (data){
                             process(data);   //参数列表里的process是一个函数，作用是把ajax返回的data赋值给属性source。
                         }
                     });
                 }
             });
          });

1. ajax请求部分对应的后端代码

       @RequestMapping("/workbench/transaction/queryCustomerNameByName.do")
       @ResponseBody
       public List<String> queryCustomerNameByName(String customerName){
           
           List<String> customerNameList = customerService.queryCustomerNameByName();
           
           return customerNameList;
       }

typeahead( ) 函数的其他属性

• source: 规定包含查询时要显示的值的数据源。值的类型是 array，默认值是 [ ]。

• items: 规定查询时要显示的条目的最大值。数据类型是 number，默认值是 8。

• matcher: 决定查询是否匹配条目。带有一个单一的参数，即要测试查询的条目。当前查询通过 this.query 访问。返回一个布尔值 true，表示查询匹配。数据类型是 function。默认情况下是大小写不敏感的。

• sorter: 用于自动分类结果。带有一个单一的参数，即具有 typeahead 实例范围的条目。当前查询通过 this.query 访问。数据类型是 function。默认值是精确匹配的，其他的值还可以是大小写敏感、大小写不敏感。

• highlighter: 用于自动高亮突出显示结果。带有一个单一的参数，即具有 typeahead 实例范围的条目。数据类型是 function。默认情况下是高亮突出显示所有默认的匹配项。

0