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属性就是自动补全的数据的来源，来源分为静态数据和动态数据。

<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。默认情况下是高亮突出显示所有默认的匹配项。