一直苦于沒有好的國籍控件可以用，于是抽空寫了一個國籍控件，現(xiàn)分享給大家。
主要功能和界面介紹
國籍控件主要支持中文、英文過濾以及鍵盤上下事件。
源碼介紹
國籍控件核心是兩個文件，navtionality.js 和 mian.css。navtionality.js主要功能是國籍控件的DOM構(gòu)建以及相應(yīng)的事件綁定；main.css主要是用于渲染國籍控件的樣式。而main.js是國籍控件的調(diào)用方法。
HTML結(jié)構(gòu)
國籍控件要呈現(xiàn)在頁面上，必須事先在頁面中加以設(shè)置以供控件加載使用。control-nationality-suggest 是容器，input 是輸入接收，nationality-suggest-list-container是提示列表，用于顯示篩選后的國籍列表。
<div class="container">
<div class="control-nationality-suggest">
<input type="text" class="nationality-suggest-input" />
<div class="nationality-suggest-list-container">
<div class="nationality-suggest-hint">輸入中英文/代碼搜索或↑↓選擇</div>
<ul class="nationality-suggest-list"></ul>
</div>
</div>
</div>
navtionality.js 介紹
navtionality是國籍控件的核心，主要負(fù)責(zé)國籍控件的數(shù)據(jù)過濾，DOM呈現(xiàn)以及相應(yīng)的事件綁定。init是整個控件的入口，通過傳入的option參數(shù)，來確定具體的綁定對象。
var nationality = {
data:[]
strData: String,
input: Object,
list: Object,
//功能描述：初始化
init: function (option) {
},
//功能描述：選項設(shè)置
setOption: function (option) {
},
//功能描述：綁定事件
setEvent: function () {
},
//功能描述：綁定數(shù)據(jù)
setData: function () {
},
//功能描述：搜索
doSearch: function (key) {
},
//功能描述：設(shè)置列表
setList: function (fvalue) {
},
//功能描述：綁定列表事件
setListEvent: function () {
},
//功能描述：設(shè)置單項值
setValue: function (item, hide) {
},
//功能描述：校驗數(shù)據(jù)
chkValue: function () {
},
//功能描述：鼠標(biāo)事件
setKeyDownEvent: function (event) {
}
}
快速搜索介紹
在整個國籍控件中，搜索是最重要的一塊，如何根據(jù)用戶的輸入篩選出相應(yīng)的國籍?dāng)?shù)據(jù)。我們采取的方法是通過正則匹配法，我們把國籍?dāng)?shù)據(jù)首先進(jìn)行格式化處理
比如原始的國籍?dāng)?shù)據(jù)是這樣的：[{ id: "CN", en: "China", cn: "中國大陸" }, { id: "HK", en: "Hong Kong", cn: "中國香港" }, { id: "MO", en: "Macau", cn: "中國澳門" }
那么我們格式化后的數(shù)據(jù)就是這樣的：#CN|China|中國大陸##HK|Hong Kong|中國香港##MO|Macau|中國澳門##
為什么要這么處理呢？是因為我們要借助正則表達(dá)式來實現(xiàn)數(shù)據(jù)的快速匹配。
//功能描述：搜索
doSearch: function (key) {
if (!key || key == "") return ["CN|China|中國大陸", "HK|Hong Kong|中國香港", "MO|Macau|中國澳門", "TW|Taiwan|中國臺灣"];
var reg = new RegExp("#[^#]*?" + key + "[^#]*?#", "gi");
return this.strData.match(reg);
}
想必大家看到我們的正則匹配，應(yīng)該明白一大半了，沒錯，我們通過將原先的數(shù)組轉(zhuǎn)換成字符串的方式，利用正則快速實現(xiàn)數(shù)據(jù)的篩選過濾。
對比下我們通過遍歷實現(xiàn)的搜索方式，可以發(fā)現(xiàn)正則的效率會高很多。
//功能描述：搜索
doSearch: function (key) {
if (!key || key == "") return ["CN|China|中國大陸", "HK|Hong Kong|中國香港", "MO|Macau|中國澳門", "TW|Taiwan|中國臺灣"];
var search = [];
for(var i=0; i< this.data.length; i++){
if(this.data[i].id.indexOf(key) >= 0 || this.data[i].en.indexOf(key) >= 0 || this.data[i].cn.indexOf(key) >= 0){
search.push(this.data[i]);
}
}
return search;
}
main.js 介紹
main是調(diào)用國籍控件的方法，通過遍歷頁面中的calss為control-nationality-suggest的DOM對象來綁定國籍控件。
$(".control-nationality-suggest").each(function () {
var input = $(this).find(".nationality-suggest-input");
var list = $(this).find(".nationality-suggest-list");
new nationality({ input: input, list: list });
})
演示與下載
查看DEMO DEMO下載
