自动补全插件

干嘛用？

用户输入几个字，自动补全出所有符合条件的内容，列在下面，用户就可以选择一条。

步骤：1、引入开发包.css,.js        ，2、创建容器div，3、容器加载完成之后，调用容器的工具函数

基于bootstrap框架实现了，使用之前，要先引入jquery，然后引入bootstrap，最后引入补全插件
<%--补全插件--%> 
<script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>

创建容器

<input type="text" class="form-control" id="create-accountName" placeholder="支持自动补全，输入客户不存在则新建">

调用工具函数

//客户名称调用自动补全的工具函数
/**
 * 用户在这里输入关键字，键盘弹起之后，source方法触发，执行里面的代码，去查询所有带有关键字的数据
 * 底层不需要写模糊查询，直接查对应的那张表就行了。
 */

     //客户名字补全插件
     $("#create-accountName").typeahead({
         //这个属性方法，每次键盘弹起都会执行里面的代码
         //source:['天地玄黄','宇宙洪荒']，source也能设置属性，也能向下面一样设置方法
         source:function(jquery,process){

             $.ajax({
                 //CustomerController类的，likeQueryCustomerName()方法
                 url:'workbench/transaction/save/likeQueryCustomerName.do',
                 type:'post',
                 dataType:'json',
                 //前端只要打了@ResponseBody，返回集合，自动转换成json对象，这个data就是返回的list集合
                 success:function(data){
                    //将查询出来的数组写到process()方法中，他将动态的赋值给source
                     process(data)
                 }
             })


         }
     })

controller层的代码

/**
 * 根据客户的名字，进行模糊查询
 * @param customerName 客户名字
 * @return 返回所有的客户名字
 */
@RequestMapping("/workbench/transaction/save/likeQueryCustomerName.do")
public @ResponseBody Object likeQueryCustomerName(String customerName){
    List<String> customers = customerService.likeQueryAllCustomer(customerName);
   return customers;
}