客户管理系统（SSM版）：bs_typeahead动态的自动补全文本框的内容

客户需求：

用户在创建交易页面，在客户名称文本框输入信息时，可以根据输入的关键字，模糊查找数据库中的客户名称，并把模糊查找的所有的客户名称以类似于下拉框的形式显示在客户名称文本框下方，用户可以从中选择自己想要的客户名称。

功能实现知识点：

2，客户名称自动补全：
   
   1)给输入框添加键盘弹起事件
   2)后台接收到请求，根据名称模糊查询，返回到客户端
   3)把查询到的数据显示在输入框下边
     用户选择一个客户，实现自动补全
   
   自动补全插件：bs_typeahead
        1)引入开发包：.css,.js
    2)创建容器：<div> <input type="text">
    3)当容器加载完成之后，对容器调用工具函数：

功能实现：

1.首先引入bs_typeahead插件，该插件是基于bootstarp的，而bootstarp又是基于jquery的，所以使用该插件要首先引入jquery插件和bootstarp插件。

bs_typeahead插件只需要通过<script>标签引入就可以了，不需要引入css文件

 2.使用该文本框作用容器

3.对该容器调用工具函数

//当容器加载完成后，对容器调用工具函数,来实现文本框的自动补全
            $("#create-accountName").typeahead({

                source:function (jquery,process) {
                    //jquery就是用户在文本框里输入的关键字，
                    //process就是一个把controller返回的值装入source的方法
                    //var customerName=$("#create-accountName").val();
                    //发送异步请求，查询所有的客户名称
                    $.ajax({
                        url:'workbench/transaction/queryAllCustomerName.do',
                        type:'post',
                        data:{
                          customerName:jquery
                        },
                        dataType: 'json',
                        success:function (data) {
                            //把返回的客户名称装入source
                            process(data);
                        }
                    });
                }
            });

TransactionController类

  @RequestMapping("/workbench/transaction/queryAllCustomerName.do")
    @ResponseBody
    public Object queryAllCustomerName(String customerName){
        //调用service层方法，查询所有的客户名称
        List<String> nameList = customerService.queryCustomerNameByName(customerName);
        //根据结果，生成响应信息
        return nameList;
    }

CustomerServiceImpl实现类

 

CustomerService接口

 

CustomerMapper.xml文件

 

CustomerMapper接口

 功能测试：

customer数据库中的内容

 输入美字，可以以下拉框的形式弹出查询到的客户名称

 

点击该下拉框中的数据，数据自动填入该文本框

 

输入数据库中没有的关键字时，什么也不弹出

输入华时，弹出华为