自动补全插件

干嘛用?

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

自动补全插件_第1张图片

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

基于bootstrap框架实现了,使用之前,要先引入jquery,然后引入bootstrap,最后引入补全插件
<%--补全插件--%> 

创建容器


调用工具函数

//客户名称调用自动补全的工具函数
/**
 * 用户在这里输入关键字,键盘弹起之后,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 customers = customerService.likeQueryAllCustomer(customerName);
   return customers;
}

你可能感兴趣的:(笔记,前端,java,javascript)