jquery+javascript編寫國(guó)籍控件
一直苦于沒有好的國(guó)籍控件可以用，于是抽空寫了一個(gè)國(guó)籍控件，現(xiàn)分享給大家。
主要功能和界面介紹
國(guó)籍控件主要支持中文、英文過濾以及鍵盤上下事件。
源碼介紹
國(guó)籍控件核心是兩個(gè)文件，navtionality.js 和 mian.css。navtionality.js主要功能是國(guó)籍控件的DOM構(gòu)建以及相應(yīng)的事件綁定；main.css主要是用于渲染國(guó)籍控件的樣式。而main.js是國(guó)籍控件的調(diào)用方法。
HTML結(jié)構(gòu)
國(guó)籍控件要呈現(xiàn)在頁面上，必須事先在頁面中加以設(shè)置以供控件加載使用。control-nationality-suggest 是容器，input 是輸入接收，nationality-suggest-list-container是提示列表，用于顯示篩選后的國(guó)籍列表。
<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是國(guó)籍控件的核心，主要負(fù)責(zé)國(guó)籍控件的數(shù)據(jù)過濾，DOM呈現(xiàn)以及相應(yīng)的事件綁定。init是整個(gè)控件的入口，通過傳入的option參數(shù)，來確定具體的綁定對(duì)象。
var nationality = {
data:[]
strData: String,
input: Object,
list: Object,
//功能描述：初始化
init: function (option) {
},
//功能描述：選項(xiàng)設(shè)置
setOption: function (option) {
},
//功能描述：綁定事件
setEvent: function () {
},
//功能描述：綁定數(shù)據(jù)
setData: function () {
},
//功能描述：搜索
doSearch: function (key) {
},
//功能描述：設(shè)置列表
setList: function (fvalue) {
},
//功能描述：綁定列表事件
setListEvent: function () {
},
//功能描述：設(shè)置單項(xiàng)值
setValue: function (item, hide) {
},
//功能描述：校驗(yàn)數(shù)據(jù)
chkValue: function () {
},
//功能描述：鼠標(biāo)事件
setKeyDownEvent: function (event) {
}
}
快速搜索介紹
在整個(gè)國(guó)籍控件中，搜索是最重要的一塊，如何根據(jù)用戶的輸入篩選出相應(yīng)的國(guó)籍?dāng)?shù)據(jù)。我們采取的方法是通過正則匹配法，我們把國(guó)籍?dāng)?shù)據(jù)首先進(jìn)行格式化處理
比如原始的國(guó)籍?dāng)?shù)據(jù)是這樣的：[{ id: "CN", en: "China", cn: "中國(guó)大陸" }, { id: "HK", en: "Hong Kong", cn: "中國(guó)香港" }, { id: "MO", en: "Macau", cn: "中國(guó)澳門" }
那么我們格式化后的數(shù)據(jù)就是這樣的：#CN|China|中國(guó)大陸##HK|Hong Kong|中國(guó)香港##MO|Macau|中國(guó)澳門##
為什么要這么處理呢？是因?yàn)槲覀円柚齽t表達(dá)式來實(shí)現(xiàn)數(shù)據(jù)的快速匹配。
//功能描述：搜索
doSearch: function (key) {
if (!key || key == "") return ["CN|China|中國(guó)大陸", "HK|Hong Kong|中國(guó)香港", "MO|Macau|中國(guó)澳門", "TW|Taiwan|中國(guó)臺(tái)灣"];
var reg = new RegExp("#[^#]*?" + key + "[^#]*?#", "gi");
return this.strData.match(reg);
}
想必大家看到我們的正則匹配，應(yīng)該明白一大半了，沒錯(cuò)，我們通過將原先的數(shù)組轉(zhuǎn)換成字符串的方式，利用正則快速實(shí)現(xiàn)數(shù)據(jù)的篩選過濾。
對(duì)比下我們通過遍歷實(shí)現(xiàn)的搜索方式，可以發(fā)現(xiàn)正則的效率會(huì)高很多。
//功能描述：搜索
doSearch: function (key) {
if (!key || key == "") return ["CN|China|中國(guó)大陸", "HK|Hong Kong|中國(guó)香港", "MO|Macau|中國(guó)澳門", "TW|Taiwan|中國(guó)臺(tái)灣"];
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)用國(guó)籍控件的方法，通過遍歷頁面中的calss為control-nationality-suggest的DOM對(duì)象來綁定國(guó)籍控件。
$(".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 });
})
演示與下載
- datePicker——日期選擇控件（with jquery）
- Javascript jquery css 寫的簡(jiǎn)單進(jìn)度條控件
- 基于jQuery的日期選擇控件
- 基于jquery的讓頁面控件不可用的實(shí)現(xiàn)代碼
- asp.net+jquery滾動(dòng)滾動(dòng)條加載數(shù)據(jù)的下拉控件
- jQuery選中select控件 無法設(shè)置selected的解決方法
- 基于jQuery的實(shí)現(xiàn)簡(jiǎn)單的分頁控件
- 使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
- 基于jQuery的獲得各種控件Value的方法
- JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID")
- 基于jquery跨瀏覽器顯示的file上傳控件
- jWiard 基于JQuery的強(qiáng)大的向?qū)Э丶榻B
- jquery獲取tr中控件值并操作tr實(shí)現(xiàn)思路
- jquery設(shè)置控件位置的方法
- .net mvc頁面UI之Jquery博客日歷控件實(shí)現(xiàn)代碼
- jquery 日期控件datepicker屬性詳細(xì)解析
- Jquery獲得控件值的三種方法總結(jié)
- jquery日歷控件實(shí)現(xiàn)方法分享
- JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
相關(guān)文章
基于JQUERY的兩個(gè)ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼
基于JQUERY的兩個(gè)ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-05-05
jQuery實(shí)現(xiàn)長(zhǎng)按按鈕觸發(fā)事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)長(zhǎng)按按鈕觸發(fā)事件的方法,可應(yīng)用于手機(jī)端應(yīng)用程序的開發(fā)中,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
jQuery過濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字
這篇文章主要介紹了jQuery過濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
本篇文章主要介紹了jquery編寫日期選擇器的實(shí)現(xiàn)過程與方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
基于Jquery的跨域傳輸數(shù)據(jù)(JSONP)
基于Jquery的跨域傳輸數(shù)據(jù)(JSONP) ，需要的朋友可以參考下。2011-03-03
JQuery將文本轉(zhuǎn)化成JSON對(duì)象需要注意的問題
在JQuery的許多方法中，很多方法的參數(shù)可以傳入一個(gè)JSON對(duì)象，比如Ajax方法的第二個(gè)參數(shù)。怎么將文本轉(zhuǎn)化成JSON對(duì)象，需要注意以下問題2011-05-05
jquery實(shí)現(xiàn)簡(jiǎn)潔文件上傳表單樣式
這篇文章向大家推薦了一款基于jquery實(shí)現(xiàn)的簡(jiǎn)潔文件上傳表單樣式，實(shí)現(xiàn)效果大方精致，極力推薦給大家，希望大家可以喜歡。2015-11-11
jQuery實(shí)現(xiàn)預(yù)加載圖片的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)預(yù)加載圖片的方法,涉及jQuery操作img的src屬性使用技巧,需要的朋友可以參考下2015-03-03
jQuery定義背景動(dòng)態(tài)切換效果的方法
這篇文章主要介紹了jQuery定義背景動(dòng)態(tài)切換效果的方法,實(shí)例分析了jQuery操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
一個(gè)圖片切換效果，胡亂寫了一下。貌似doctype到了html4.01下面樣式有點(diǎn)問題。2010-07-07