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:

           

                                               
                                             

                   

Enter Chinese and English/code search or ↑↓ select

                                                                                                                                                                                                                                              

                                                                                                                                                                                                               

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of inheritance in JavaScript_javascript skillsNext article：Detailed explanation of inheritance in JavaScript_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills