關於bigAutocomplete的自動補全功能

1. 首先獻上官網地址和資源

    這個官網什麼的我不知道，好像沒官網，哈哈哈哈

    直接百度雲鏈接：https://pan.baidu.com/s/1ehti6Ue6cNtBipjkCtxWSQ 

                     密碼：lq2k

    jquery.bigautocomplete.css

    jquery.bigautocomplete.js

2.具體前端後端代碼（html沒有加入其他樣式）

    引入上面的js和css

    這是前端html部分，很簡單就是個文本框

<div class="controls">
    <input type="text" name="merchant.openBank" placeholder="輸入開戶行兩個關鍵字，用空格分開" id="merchant_openbank" class="m-wrap span12">
</div>

    這是js部分

 //自動補全
$("#merchant_openbank").bigAutocomplete({
	width:448,
	url:"<%=path %>/bankbranch/getBankBranchName.html",//這裏就和ajax請求一樣
	callback:function(data){//回調的函數
	var merchant_openBank = $("#merchant_openbank").val();
	//alert($(this).val());
	if (merchant_openBank) {
	    $.ajax({
		url : "<c:url value="/bankbranch/getBankBranchNo.html"/>",
		data : {
		    title : merchant_openBank
		    },
		type : "post",
		dataType : "json",
		success : function(data) {
		$("#merchant_openbankno").val("")
		if (data != null) {
			$.each(data, function(i, v) {
			$("#merchant_openbankno").val(v.bankBranchNo)
			});
		    }
		}
	    });
	}
    }
}); 

    其實上面的核心就是紅色部分，後面只是其他的需求

這是後臺代碼（表現層）

@NoMenu
@RequestMapping("/getBankBranchName")
@ResponseBody
public Map<String, List<BankBranch>> getBankBranchNam(String keyword) {
	//keyword是文本框內容，通過關鍵詞獲取所有銀行分行
	List<BankBranch> bankBranchName = bankBranchService.getBankBranchName(keyword);
	Map<String, List<BankBranch>> map = new HashMap<String,List<BankBranch>>();
	map.put("data", bankBranchName);
	return map;
}

3.講解

    這個當時需求是能不能快速知道所在銀行開戶行支行，本來這裏之前是純文本，讓客戶去填寫的，但是由於支行多（20多萬數據），很多人根本不知道支行的全稱，只知道個大概，所以這裏採用客戶只需要輸入關鍵字就可以查詢出匹配關鍵字的所有開戶行，並類似於百度搜索時根據已有相似問題自動補全的那種顯示。由於當時寫出來後測試發現這個文本框裏只要有一個字符發生變化，就會向後臺發送一次ajax請求，再加上如果出現支行常見的字，‘中’，'國'，‘銀行’，等等這些字詞，就會發現瞬間卡死，畢竟20多萬的數據，sql語句採用模糊查詢。高心的是，最後想到了一個方法，採用分割法，就像前端代碼裏的提示一樣，‘輸入開戶行兩個關鍵字，用空格分開’，這樣減輕了之前在文本框動任意一個字符就會發送請求的壓力，而且後臺通過切割法將兩個關鍵字採用雙模糊查詢，大大提高了查詢效率，至此隨便怎麼輸入，都沒有再次出現卡頓的現象。

值得注意的是好像這個自動補全只會識別title，也就是說當後臺返給前臺json數據時，那個文本框所識別的是key=title,然後將對應的value顯示出來，如果我們查詢的對象的屬性值爲其他，就顯示不出來，看下面：

@Entity
@Table(name="bbp_bank_branch")
public class BankBranch {
    @Id
    @GeneratedValue(generator = "BankBranchSeq", strategy = GenerationType.SEQUENCE)
    @SequenceGenerator(name = "BankBranchSeq", sequenceName = "bank_branch_seq")
    private Integer id;
    @Column(name="bank_branch_code", length=20)
    private String code; //銀行編碼
    @Column(name="bank_name", length=100)
    private String bankName;//銀行名稱
    @Column(name="bank_branch_name", length=100)
    private String title;//銀行分支名稱bankBranchName，取名title是爲了搜索自動補全功能
    @Column(name="bank_branch_no")
    private Long bankBranchNo;//銀行分支號

我所要自動補全的是上面紅色字體銀行分支名稱bankBranchName，當時爲了快速實現功能，直接改了這個實體類，哈哈，我新創建的實體類，無所謂了，但是感覺不正規，其實可以不改動這個實體類的，另外單獨弄個類也是可以的，但是懶得改了

寫到這裏就要結束啦。

展示下效果圖：

    

       真的很快，哈哈哈哈哈哈