客戶需求：

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

功能實現(xiàn)知識點：

2，客戶名稱自動補全：
? ?
?? 1)給輸入框添加鍵盤彈起事件
?? 2)后臺接收到請求，根據(jù)名稱模糊查詢，返回到客戶端
?? 3)把查詢到的數(shù)據(jù)顯示在輸入框下邊
???? 用戶選擇一個客戶，實現(xiàn)自動補全
? ?
?? 自動補全插件：bs_typeahead
??????? 1)引入開發(fā)包：.css,.js
?? ?2)創(chuàng)建容器：<div> <input type="text">
?? ?3)當(dāng)容器加載完成之后，對容器調(diào)用工具函數(shù)：

功能實現(xiàn)：

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

bs_typeahead插件只需要通過<script>標(biāo)簽引入就可以了，不需要引入css文件

?2.使用該文本框作用容器

3.對該容器調(diào)用工具函數(shù)

//當(dāng)容器加載完成后，對容器調(diào)用工具函數(shù),來實現(xiàn)文本框的自動補全$("#create-accountName").typeahead({source:function (jquery,process) {//jquery就是用戶在文本框里輸入的關(guān)鍵字，//process就是一個把controller返回的值裝入source的方法//var customerName=$("#create-accountName").val();//發(fā)送異步請求，查詢所有的客戶名稱$.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){//調(diào)用service層方法，查詢所有的客戶名稱List<String> nameList = customerService.queryCustomerNameByName(customerName);//根據(jù)結(jié)果，生成響應(yīng)信息return nameList;}

CustomerServiceImpl實現(xiàn)類

?

CustomerService接口

?

CustomerMapper.xml文件

?

CustomerMapper接口

?功能測試：

customer數(shù)據(jù)庫中的內(nèi)容

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

?

點擊該下拉框中的數(shù)據(jù)，數(shù)據(jù)自動填入該文本框

?

輸入數(shù)據(jù)庫中沒有的關(guān)鍵字時，什么也不彈出

輸入華時，彈出華為

?

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。