jquery+javascript編寫(xiě)國(guó)籍控件

更新時(shí)間：2015年02月12日 08:56:55 投稿：hebedich

本文給大家分享一個(gè)自己編寫(xiě)的使用jquery+javascript實(shí)現(xiàn)的國(guó)籍控件，效果非常不錯(cuò)，這里推薦給大家。

一直苦于沒(méi)有好的國(guó)籍控件可以用，于是抽空寫(xiě)了一個(gè)國(guó)籍控件，現(xiàn)分享給大家。

主要功能和界面介紹

國(guó)籍控件主要支持中文、英文過(guò)濾以及鍵盤(pán)上下事件。

源碼介紹

國(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)在頁(yè)面上，必須事先在頁(yè)面中加以設(shè)置以供控件加載使用。control-nationality-suggest 是容器，input 是輸入接收，nationality-suggest-list-container是提示列表，用于顯示篩選后的國(guó)籍列表。

復(fù)制代碼代碼如下:

    <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">輸入中英文/代碼搜索或&uarr;&darr;選擇</div>

                <ul class="nationality-suggest-list"></ul>

            </div>

        </div>

    </div>

navtionality.js 介紹

navtionality是國(guó)籍控件的核心，主要負(fù)責(zé)國(guó)籍控件的數(shù)據(jù)過(guò)濾，DOM呈現(xiàn)以及相應(yīng)的事件綁定。init是整個(gè)控件的入口，通過(guò)傳入的option參數(shù)，來(lái)確定具體的綁定對(duì)象。

復(fù)制代碼代碼如下:

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ù)用戶(hù)的輸入篩選出相應(yīng)的國(guó)籍?dāng)?shù)據(jù)。我們采取的方法是通過(guò)正則匹配法，我們把國(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ó)澳門(mén)" }

為什么要這么處理呢？是因?yàn)槲覀円柚齽t表達(dá)式來(lái)實(shí)現(xiàn)數(shù)據(jù)的快速匹配。

復(fù)制代碼代碼如下:

    //功能描述：搜索

    doSearch: function (key) {

        if (!key || key == "") return ["CN|China|中國(guó)大陸", "HK|Hong Kong|中國(guó)香港", "MO|Macau|中國(guó)澳門(mén)", "TW|Taiwan|中國(guó)臺(tái)灣"];

        var reg = new RegExp("#[^#]*?" + key + "[^#]*?#", "gi");

        return this.strData.match(reg);

    }

想必大家看到我們的正則匹配，應(yīng)該明白一大半了，沒(méi)錯(cuò)，我們通過(guò)將原先的數(shù)組轉(zhuǎn)換成字符串的方式，利用正則快速實(shí)現(xiàn)數(shù)據(jù)的篩選過(guò)濾。

對(duì)比下我們通過(guò)遍歷實(shí)現(xiàn)的搜索方式，可以發(fā)現(xiàn)正則的效率會(huì)高很多。

復(fù)制代碼代碼如下:

    //功能描述：搜索

    doSearch: function (key) {

        if (!key || key == "") return ["CN|China|中國(guó)大陸", "HK|Hong Kong|中國(guó)香港", "MO|Macau|中國(guó)澳門(mén)", "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ó)籍控件的方法，通過(guò)遍歷頁(yè)面中的calss為control-nationality-suggest的DOM對(duì)象來(lái)綁定國(guó)籍控件。

復(fù)制代碼代碼如下:

 $(".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下載

您可能感興趣的文章: