jquery javascript pour écrire la nationalité control_jquery

Je souffrais du manque d'un bon contrôle de nationalité, j'ai donc pris le temps de rédiger un contrôle de nationalité et je le partage maintenant avec tout le monde.

Fonctions principales et introduction à l'interface

Le contrôle de nationalité prend principalement en charge le filtrage du chinois et de l'anglais ainsi que les événements de haut et de bas du clavier.

Présentation du code source

Le cœur du contrôle de nationalité est constitué de deux fichiers, navtionality.js et mian.css. La fonction principale de navtionality.js est la construction DOM du contrôle de nationalité et la liaison d'événement correspondante. main.css est principalement utilisé pour restituer le style du contrôle de nationalité. Et main.js est la méthode d'appel du contrôle de nationalité.

Structure HTML

Pour que le contrôle de nationalité soit affiché sur la page, il faut qu'il soit paramétré au préalable sur la page pour que le contrôle se charge. control-nationality-suggest est le conteneur, input est la réception d'entrée, nationality-suggest-list-container est la liste d'invites, utilisée pour afficher la liste de nationalités filtrée.

Copier le code Le code est le suivant :

           

                                               
                                             

                   

Entrez le chinois et l'anglais/recherche de code ou ↑↓ sélectionnez

                                                                                                                                                                                                                                           

                                                                                                                                                                                                           

navtionality.js Introduction

Navtionality est au cœur du contrôle de nationalité et est principalement responsable du filtrage des données, du rendu DOM et de la liaison des événements correspondants du contrôle de nationalité. init est l'entrée de l'ensemble du contrôle. L'objet de liaison spécifique est déterminé via le paramètre d'option transmis.

Copier le code Le code est le suivant :

var nationalité = {

Données :[]
strData : chaîne,
entrée : Objet,
Liste : Objet,
//Description de la fonction : Initialisation
init : fonction (option) {
},
//Description de la fonction : réglage des options
setOption : fonction (option) {
},
//Description de la fonction : Événement de liaison
setEvent : fonction () {
},
//Description de la fonction : Lier les données
setData : fonction () {
},
//Description de la fonction : Rechercher
doSearch : fonction (clé) {
},
//Description de la fonction : Liste des paramètres
setList : fonction (fvalue) {
},
//Description de la fonction : événement de liste de liaison
setListEvent : fonction () {
},
//Description de la fonction : définir la valeur d'un seul élément
setValue : fonction (élément, masquer) {
},
//Description de la fonction : Données de vérification
chkValue : fonction () {
},
//Description de la fonction : Événement souris
setKeyDownEvent : fonction (événement) {
>
>

Introduction à la recherche rapide

Dans l'ensemble du contrôle de nationalité, la recherche est la partie la plus importante, comment filtrer les données de nationalité correspondantes en fonction de la saisie de l'utilisateur. La méthode que nous adoptons consiste à utiliser la méthode de correspondance régulière. Nous formatons d'abord les données de nationalité

.

Par exemple, les données de nationalité d'origine ressemblent à ceci : [{ id: "CN", en: "China", cn: "Mainland China" }, { id: "HK", en: "Hong Kong", cn : "Hong Kong, Chine" }, { id : "MO", fr : "Macao", cn : "Macao, Chine" }

Ensuite, nos données formatées ressemblent à ceci : #CN|Chine|中国 Mainland##HK|Hong Kong|Chine Hong Kong##MO|Macao|Chine Macao##

Pourquoi faisons-nous cela ? C'est parce que nous devons utiliser des expressions régulières pour obtenir une correspondance rapide des données.

Copier le code Le code est le suivant :

//Description de la fonction : Rechercher
doSearch : fonction (clé) {
if (!key || key == "") return ["CN|Chine|Chine continentale", "HK|Hong Kong|Hong Kong, Chine", "MO|Macao|Macao, Chine", "TW|Taiwan| Taïwan, Chine" ];
        var reg = new RegExp("#[^#]*?" key "[^#]*?#", "gi");
          return this.strData.match(reg);
>

Vous devez avoir compris l'essentiel après avoir vu notre correspondance régulière. Oui, nous utilisons des expressions régulières pour filtrer rapidement les données en convertissant le tableau d'origine en chaîne.

En comparant la méthode de recherche que nous avons implémentée via la traversée, nous pouvons constater que l'efficacité de la régularisation est beaucoup plus élevée.

Copier le code Le code est le suivant :

//Description de la fonction : Rechercher
doSearch : fonction (clé) {
if (!key || key == "") return ["CN|Chine|Chine continentale", "HK|Hong Kong|Hong Kong, Chine", "MO|Macao|Macao, Chine", "TW|Taiwan| Taïwan, Chine" ];
      var recherche = [];
pour(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 (clé) >= 0){
Search.push(this.data[i]);
            }
>
         renvoyer la recherche ;
>

introduction à main.js

Main est la méthode qui appelle le contrôle de nationalité et lie le contrôle de nationalité en traversant l'objet DOM dont le cals est control-nationality-suggest dans la page.

Copier le code Le code est le suivant :

$(".control-nationality-suggest").each(function () {
      var input = $(this).find(".nationality-suggest-input");
      var list = $(this).find(".nationality-suggest-list");
nouvelle nationalité ({ input: input, list: list });
})

Démo et téléchargement

Voir la DÉMO Télécharger la DÉMO

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

Repo: Comment relancer ses coéquipiers

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

4 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

4 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7364

15

Tutoriel Java

1628

14

Tutoriel CakePHP

1353

52

Tutoriel Laravel

1265

25

Tutoriel PHP

1214

29

Afficher plus