Fonction d'invite automatique lors de la recherche basée sur les compétences javascript_javascript

Lorsque la quantité de données n'est pas très importante et qu'il n'y a pas d'interface fonctionnelle correspondant au back-end, certaines fonctions de recherche simples sont essentiellement implémentées par le front-end. Je l'ai utilisé récemment, alors j'en ai écrit une et. je l'ai posté pour le partager avec tout le monde :

Rendu :

Description de la fonction :

Après avoir appuyé sur le clavier, recherchez les caractères chinois dans l'entrée, le pinyin correspondant et le numéro des caractères chinois

;

Idées de mise en œuvre :

Convertissez d'abord les caractères chinois de l'entrée en Pinyin, puis assemblez les caractères chinois, le Pinyin et les nombres en une chaîne normale, placez-la dans un tableau, puis déterminez si la valeur de l'entrée est un caractère chinois, Pinyin. , ou un nombre à chaque fois que vous appuyez sur le clavier, puis parcourez le tableau selon une règle fixe, afin que l'entrée correspondante puisse être trouvée

;

Méthode d'activation :

// search-test-inner ---> // valeur de recherche ---> zone de saisie
// liste de valeurs de recherche ---> Les résultats de recherche affichent div
// search-li ---> Rechercher des éléments
new SEARCH_ENGINE("search-test-inner","search-value","search-value-list","search-li");
Remarque : L'entrée de recherche ainsi que deux données temporaires, data-name et data-phone, sont utilisées pour stocker les caractères et les chiffres chinois.

Remarque : la conversion Pinyin utilise un plug-in appelé jQuery.Hz2Py-min.js. Étant donné que ce plug-in ne peut convertir que la valeur en entrée, il y a une étape supplémentaire dans le code. Tout d'abord, mettez la valeur dans. une entrée temporaire, puis convertissez.

HTML :

Copier le code Le code est le suivant :

   

       
       

   

   

       

           
• 
                  13914157895
                  战士
             

           
• 
                  15112357896
                  牧师
             

           
• 
                  13732459980
                  盗贼
             

           
• 
                  18015942365
                  德鲁伊
             

           
• 
                  15312485698
                  武僧
             

           
• 
                  13815963258
                  死灵法师
             

           
• 
                  13815934258
                  圣骑士
             

       

   

CSS :

复制代码 代码如下 :

* { remplissage : 0 ; marge : 0 ; >
ol , ul { style de liste : aucun ; >
corps { taille de police : 12 px ; couleur : #333 ; >
.search-test-inner { marge : 100px auto ; remplissage : 10 px ; largeur : 400 px ; arrière-plan : #e0e0e0 ; rayon de bordure : 10 px ; boîte-ombre : 1px 2px 6px #444 ; >
.search-val-inner { marge-bas : 20px ; remplissage : 10 px ; arrière-plan : #fff ; >
.member-list-inner .search-li { remplissage : 10 px ; >
.search-value-list { margin-top : 10px ; >
.search-value-list li { remplissage : 5 px ; >
.member-list-inner .search-li .phone,
.search-value-list li .phone { float: right; >
.search-value {largeur : 100 % ; hauteur : 30px ; hauteur de ligne : 30 px ; >
.tips { font-weight : gras ; >

JS :

复制代码 代码如下 :

//------------------------------------------------ ---【Initialisation】
function SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){
//Tableau pour stocker le Pinyin, les caractères chinois et les chiffres
This.searchMemberArray = [];
//Objet d'action
This.dom = $("." dom);
//Champ de recherche
This.searchInput = "." searchInput;
//Boîte de résultats de recherche
This.searchResultInner = this.dom.find("." searchResultInner);
//Liste des objets recherchés
This.searchList = this.dom.find("." searchList);
//Convertir en pinyin et stocker dans un tableau
This.transformPinYin();
//Événement de recherche de liaison
This.searchActiveEvent();
>
SEARCH_ENGINE.prototype = {
//-----------------------------【Convertir en Pinyin et stocker le Pinyin, les caractères chinois et les nombres dans le tableau】
TransformPinYin : fonction(){
//Stocker temporairement les objets de données
           $("body").append('');
        var $pinyin = $("input.pingying-box");
pour(var i=0;i // Stocke le nom et convertis-le en Pinyin
               $pinyin.val(this.searchList.eq(i).attr("data-name"));
//Convertir les caractères chinois en Pinyin
          var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,"");
//Caractères chinois
          var cnCharacter = this.searchList.eq(i).attr("data-name");
à           var digital = this.searchList.eq(i).attr("data-phone");
​​​​​​ //Enregistrer dans un tableau
This.searchMemberArray.push(pinyin "&" cnCharacter "&" digital);
>
//Supprimer l'objet de données de stockage temporaire
         $pinyin.remove();
},
//--------------------------------[Mot clé de recherche floue]
fuzzySearch : function(type,val){
      var s;
        var returnArray = [];
​​​​ //Pinyin
Si(tapez === "pinyin"){
          s = 0;
>
           //Caractères chinois
          else if(type === "cnCharacter"){
          s = 1;
>
​​​​ //Numéro
           else if(type === "numérique"){
          s = 2;
>
pour(var i=0;i                                 // Contient les caractères
If(this.searchMemberArray[i].split("&")[s].indexOf(val) >= 0){
                 returnArray.push(this.searchMemberArray[i]);
            }
>
         return returnArray;
},
//-----------------------------【Résultats de la recherche de sortie】
PostMemberList : function(tempArray){
      var html = '';
//Il y a des résultats de recherche
        si(tempArray.length > 0){
            html = '

搜索结果（' tempArray.length '）

';
            pour(var i=0;i                 var sArray = tempArray[i].split("&");
                html = '

';
                html = '' sArray[2] '';
                html = '' sArray[1] '';
                html = '

';
            >
        >
        //无搜索结果
        autre{
            if($(this.searchInput).val() != ""){
                html = '

无搜索结果……

';
            }autre{
                this.searchResultInner.html("");
            >
        >
        this.searchResultInner.html(html);
    },
    //-----------------------------【绑定搜索事件】
    searchActiveEvent : fonction(){
        var searchEngine = ceci;
        $(document).on("keyup",this.searchInput,function(){
            //临时存放找到的数组
            var tempArray = [];
            var val = $(this).val();
            //判断拼音的正则
            var pinYinRule = /^[A-Za-z] $/;
            //判断汉字的正则
            var cnCharacterRule = new RegExp("^[u4E00-u9FFF] $","g");
            //判断整数的正则
            var digitalRule = /^[- ]?d (.d )?$/;
            //只搜索3种情况
            //拼音
            si(pinYinRule.test(val)){
                tempArray = searchEngine.fuzzySearch("pinyin",val);
            >
            //汉字
            sinon if(cnCharacterRule.test(val)){
                tempArray = searchEngine.fuzzySearch("cnCharacter",val);
            >
            //数字
            sinon if(digitalRule.test(val)){
                tempArray = searchEngine.fuzzySearch("digital",val);
            >
            autre{
                searchEngine.searchResultInner.html('

无搜索结果……

');
            }
              searchEngine.postMemberList(tempArray);
        });
>
};

L'effet n'est-il pas génial ? Les amis, vous pouvez l'utiliser dans vos propres projets après l'avoir embelli