jquery javascript to write nationality control_jquery

I have been suffering from the lack of a good nationality control, so I took the time to write a nationality control and now share it with everyone.

Main functions and interface introduction

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

Source code 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 binding; main.css is mainly used to render the style of the nationality control. And main.js is the calling method of the nationality control.

HTML structure

For the nationality control to be displayed on the page, it must be set in advance on the page for the control to load. control-nationality-suggest is the container, input is input reception, nationality-suggest-list-container is the prompt list, used to display the filtered nationality list.

Copy code The code is 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">Enter Chinese and English/code search or ↑↓ select </div>
                                                                                                                                                                                                                                               <ul class="nationality-suggest-list"></ul>
                                                                                                                                                                                                                </div>

navtionality.js Introduction

Navtionality is the core of the nationality control and is mainly responsible for data filtering, DOM rendering and corresponding event binding of the nationality control. init is the entrance to the entire control. The specific binding object is determined through the passed option parameter.

Copy code The code is as follows:

var nationality = {

Data:[]
strData: String,
input: Object,
List: Object,
//Function description: Initialization
init: function (option) {
},
//Function description: option setting
setOption: function (option) {
},
//Function description: Binding event
setEvent: function () {
},
//Function description: Bind data
setData: function () {
},
//Function description: Search
doSearch: function (key) {
},
//Function description: Setting list
setList: function (fvalue) {
},
//Function description: Binding list event
setListEvent: function () {
},
//Function description: Set single item value
setValue: function (item, hide) {
},
//Function description: Verification data
chkValue: function () {
},
//Function description: Mouse event
setKeyDownEvent: function (event) {
}
}

Quick search introduction

In the entire nationality control, search is the most important part, how to filter out the corresponding nationality data based on the user's input. The method we adopt is through the regular matching method. We first format the nationality data

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

Then our formatted data is like this: #CN|China|中国 Mainland##HK|Hong Kong|China Hong Kong##MO|Macau|China Macau##

Why do we do this? It's because we need to use regular expressions to achieve fast matching of data.

Copy code The code is as follows:

//Function description: Search
doSearch: function (key) {
if (!key || key == "") return ["CN|China|Mainland China", "HK|Hong Kong|Hong Kong, China", "MO|Macau|Macau, China", "TW|Taiwan|Taiwan, China" ];
        var reg = new RegExp("#[^#]*?" key "[^#]*?#", "gi");
          return this.strData.match(reg);
}

You must have understood most of it after seeing our regular matching. Yes, we use regular expressions to quickly filter data by converting the original array into a string.

Comparing the search method we implemented through traversal, we can find that the efficiency of regularization is much higher.

Copy code The code is as follows:

//Function description: Search
doSearch: function (key) {
if (!key || key == "") return ["CN|China|Mainland China", "HK|Hong Kong|Hong Kong, China", "MO|Macau|Macau, China", "TW|Taiwan|Taiwan, China" ];
      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 that calls the nationality control, and binds the nationality control by traversing the DOM object whose calss is control-nationality-suggest in the page.

Copy code The code is 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