jquery Javascript zum Schreiben von nationality control_jquery

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“ }

Dann sehen unsere formatierten Daten so aus: #CN|China|中国 Mainland##HK|Hong Kong|China Hong Kong##MO|Macau|China Macau##

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

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

1 Monate vor By DDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

1 Monate vor By DDD

R.E.P.O. Beste grafische Einstellungen

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7388

15

Java-Tutorial

1630

14

CakePHP-Tutorial

1357

52

Laravel-Tutorial

1267

25

PHP-Tutorial

1216

29

Mehr anzeigen