客戶需求：

用戶在創建交易頁面，在客戶名稱文本框輸入信息時，可以根據輸入的關鍵字，模糊查找數據庫中的客戶名稱，并把模糊查找的所有的客戶名稱以類似于下拉框的形式顯示在客戶名稱文本框下方，用戶可以從中選擇自己想要的客戶名稱。

功能實現知識點：

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) {//把返回的客戶名稱裝入sourceprocess(data);}});}});

TransactionController類

@RequestMapping("/workbench/transaction/queryAllCustomerName.do")@ResponseBodypublic Object queryAllCustomerName(String customerName){//調用service層方法，查詢所有的客戶名稱List<String> nameList = customerService.queryCustomerNameByName(customerName);//根據結果，生成響應信息return nameList;}

CustomerServiceImpl實現類

?

CustomerService接口

?

CustomerMapper.xml文件

?

CustomerMapper接口

?功能測試：

customer數據庫中的內容

?輸入美字，可以以下拉框的形式彈出查詢到的客戶名稱

?

點擊該下拉框中的數據，數據自動填入該文本框

?

輸入數據庫中沒有的關鍵字時，什么也不彈出

輸入華時，彈出華為

?

?

總結

以上是生活随笔為你收集整理的客户管理系统（SSM版）：bs_typeahead动态的自动补全文本框的内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。