Jquery+javascript Write Nationality Control _jquery

have been suffering from the lack of good nationality control can be used, so the time to write a nationality control, now share to everyone.

Main function and interface introduction

The nationality control mainly supports the Chinese and English filtering as well as the keyboard up and down events.

SOURCE Introduction

The core of the nationality control is two files, Navtionality.js and Mian.css. The main function of Navtionality.js is the DOM construction of the nationality control and the corresponding event bindings; Main.css is primarily used to render the style of the nationality control. And Main.js is the invocation method of the nationality control.

HTML structure

The nationality control is to be rendered on the page and must be set up in the page beforehand for the control to load. The control-nationality-suggest is a container, input is a receive, Nationality-suggest-list-container is a list of prompts to display the filtered list of nationalities.

Copy Code code as follows:

<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" > Input in English/code search or ↑↓ selection </div>
<ul class= "Nationality-suggest-list" ></ul>
</div>
</div>
</div>

Navtionality.js Introduction

Navtionality is the core of the nationality control, primarily responsible for data filtering, DOM rendering, and corresponding event binding for the nationality control. Init is the entry point for the entire control and determines the specific bound object by passing in the option parameter.

Copy Code code as follows:

var nationality = {
Data:[]
Strdata:string,
Input:object,
List:object,
Feature Description: Initialization
Init:function (option) {
},
Feature Description: Option settings
Setoption:function (option) {
},
Feature Description: Binding events
Setevent:function () {
},
Feature Description: Binding data
Setdata:function () {
},
Function Description: Search
Dosearch:function (key) {
},
Feature Description: Setting list
Setlist:function (Fvalue) {
},
Feature Description: Binding list Events
Setlistevent:function () {
},
Function Description: Set individual values
Setvalue:function (item, hide) {
},
Function Description: Verify data
Chkvalue:function () {
},
Function Description: Mouse events
Setkeydownevent:function (event) {
}
}

Quick Search Introduction

In the entire nationality control, the search is the most important piece, how to filter out the corresponding nationality data according to the user's input. The way we do this is through the regular matching method, we first format the data of the nationality

For example, the original nationality data is this: [{ID: "cn", en: "China", CN: "Chinese Mainland"}, {ID: "HK", en: "Hong Kong", CN: "Hongkong, China"}, {id: "MO", en: "Macau", CN: "China Macau"}

So the data we have formatted is this: #CN | china| Chinese Mainland # #HK | Hong kong| China Hongkong # #MO | Macau| China Macau #

Why do you have to deal with this? is because we have to use regular expressions to achieve fast data matching.

Copy Code code as follows:

Function Description: Search
Dosearch:function (key) {
if (!key | | key = = "") Return ["cn| china| Chinese mainland "," hk| Hong kong| China "," mo| macau| China Macau "," tw| taiwan| China Taiwan "];
var reg = new RegExp ("#[^#]*" + key + "[^#]*?#", "GI");
Return This.strData.match (REG);
}

We must have seen our regular match, we should understand the half, yes, we use the method of converting the original array into a string, we can quickly realize the filtering filtering of the data.

In contrast, we can find that the efficiency of the regular is much higher by traversing the search methods implemented by traversal.

Copy Code code as follows:

   //Feature Description: Search
    dosearch:function ( Key) {
        if (!key | | key = = "") Return ["cn| china| Chinese mainland "," hk| Hong kong| China "," mo| macau| China Macau "," tw| taiwan| China 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 Introduction

Main is the method of invoking the nationality control, which binds the nationality control by traversing the DOM object Calss in the page as Control-nationality-suggest.

Copy Code code as follows:

$ (". 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 and download

View Demo Demo Download