Heim >Web-Frontend >js-Tutorial >jquery Javascript zum Schreiben von nationality control_jquery

jquery Javascript zum Schreiben von nationality control_jquery

WBOYOriginal: 2016-05-16 16:14:321927Durchsuche

Ich habe unter dem Mangel an einer guten Nationalitätskontrolle gelitten, deshalb habe ich mir die Zeit genommen, eine Nationalitätskontrolle zu schreiben und sie nun mit allen zu teilen.

Hauptfunktionen und Einführung in die Benutzeroberfläche

Die Nationalitätskontrolle unterstützt hauptsächlich die Filterung von Chinesisch und Englisch sowie Auf- und Ab-Ereignisse der Tastatur.

Einführung in den Quellcode

Der Kern der Nationalitätskontrolle sind zwei Dateien, navtionality.js und mian.css. Die Hauptfunktion von navtionality.js ist die DOM-Konstruktion der Nationalitätskontrolle und die entsprechende Ereignisbindung main.css wird hauptsächlich zum Rendern des Stils der Nationalitätskontrolle verwendet. Und main.js ist die aufrufende Methode der Nationalitätskontrolle.

HTML-Struktur

Damit die Nationalitätskontrolle auf der Seite angezeigt wird, muss sie vorab auf der Seite eingestellt werden, damit die Kontrolle geladen werden kann. control-nationality-suggest ist der Container, input ist der Eingabeempfang, nationality-suggest-list-container ist die Eingabeaufforderungsliste, die zum Anzeigen der gefilterten Nationalitätsliste verwendet wird.

Code kopieren Der Code lautet wie folgt:

Geben Sie Chinesisch und Englisch ein/Suchcode oder ↑↓ wählen Sie

& Lt; ul class = "nationalitätsgügige list" & gt; & lt;/ul & gt;

navtionality.js Einführung

Navtionalität ist der Kern der Nationalitätskontrolle und hauptsächlich für die Datenfilterung, das DOM-Rendering und die entsprechende Ereignisbindung der Nationalitätskontrolle verantwortlich. init ist der Eingang zum gesamten Steuerelement. Das spezifische Bindungsobjekt wird durch den übergebenen Optionsparameter bestimmt.

Code kopieren Der Code lautet wie folgt:

var Nationalität = {

Daten:[]
strData: String,
Eingabe: Objekt,
Liste: Objekt,
//Funktionsbeschreibung: Initialisierung
init: Funktion (Option) {
},
//Funktionsbeschreibung: Optionseinstellung
setOption: Funktion (Option) {
},
//Funktionsbeschreibung: Bindungsereignis
setEvent: Funktion () {
},
//Funktionsbeschreibung: Daten binden
setData: Funktion () {
},
//Funktionsbeschreibung: Suche
doSearch: Funktion (Taste) {
},
//Funktionsbeschreibung: Einstellungsliste
setList: Funktion (fvalue) {
},
//Funktionsbeschreibung: Bindungslistenereignis
setListEvent: Funktion () {
},
//Funktionsbeschreibung: Einzelelementwert festlegen
setValue: Funktion (Element, Ausblenden) {
},
//Funktionsbeschreibung: Verifizierungsdaten
chkValue: Funktion () {
},
//Funktionsbeschreibung: Mausereignis
setKeyDownEvent: Funktion (Ereignis) {
}
}

Schnelle Sucheinführung

In der gesamten Nationalitätskontrolle ist die Suche der wichtigste Teil, wie man die entsprechenden Nationalitätsdaten basierend auf den Eingaben des Benutzers herausfiltert. Die Methode, die wir anwenden, ist die reguläre Matching-Methode. Wir formatieren zunächst die Nationalitätsdaten

Zum Beispiel lauten die ursprünglichen Nationalitätsdaten wie folgt: [{ id: "CN", en: "China", cn: "Mainland China" }, { id: "HK", en: "Hong Kong", cn: „Hongkong, China“ }, { id: „MO“, en: „Macau“, cn: „Macau, China“ }

Warum machen wir das? Dies liegt daran, dass wir reguläre Ausdrücke verwenden müssen, um einen schnellen Datenabgleich zu erreichen.

Code kopieren Der Code lautet wie folgt:

//Funktionsbeschreibung: Suche 

doSearch: Funktion (Taste) {

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);

}

Sie müssen das meiste davon verstanden haben, nachdem Sie unseren regulären Abgleich gesehen haben. Ja, wir verwenden reguläre Ausdrücke, um Daten schnell zu filtern, indem wir das ursprüngliche Array in einen String konvertieren.

Beim Vergleich der Suchmethode, die wir durch Traversierung implementiert haben, können wir feststellen, dass die Effizienz der Regularisierung viel höher ist.

Code kopieren Der Code lautet wie folgt:

//Funktionsbeschreibung: Suche 

doSearch: Funktion (Taste) {

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 (Schlüssel) >= 0){

Search.push(this.data[i]);

            }

}

         Suche zurückgeben;

}

main.js-Einführung

Main ist die Methode, die die Nationalitätskontrolle aufruft und die Nationalitätskontrolle bindet, indem sie das DOM-Objekt durchläuft, dessen Calss auf der Seite control-nationality-suggest ist.

Code kopieren Der Code lautet wie folgt:

$(".control-nationality-suggest").each(function () {

      var input = $(this).find(".nationality-suggest-input");

      var list = $(this).find(".nationality-suggest-list");

neue Nationalität({ input: input, list: list });

})

Demo und Download

DEMO ansehen DEMO-Download

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Vererbung in JavaScript_Javascript-KenntnissenNächster Artikel：Detaillierte Erläuterung der Vererbung in JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen