Automatische Eingabeaufforderungsfunktion bei der Suche basierend auf Javascript_Javascript-Kenntnissen

Wenn die Datenmenge nicht sehr groß ist und es keine funktionale Schnittstelle gibt, die dem Back-End entspricht, werden einige einfache Suchfunktionen grundsätzlich vom Front-End implementiert. Ich habe sie kürzlich zufällig verwendet, also habe ich eine geschrieben hat es gepostet, um es mit allen zu teilen:

Rendering:

Funktionsbeschreibung:

Suchen Sie nach dem Drücken der Tastatur nach den chinesischen Zeichen im Eintrag, dem entsprechenden Pinyin und der Anzahl der chinesischen Zeichen

Umsetzungsideen:

Konvertieren Sie zuerst die chinesischen Zeichen im Eintrag in Pinyin, fügen Sie dann die chinesischen Zeichen Pinyin und die Zahlen zu einer regulären Zeichenfolge zusammen, fügen Sie sie in ein Array ein und bestimmen Sie dann, ob der Wert in der Eingabe ein chinesisches Zeichen Pinyin ist , oder eine Zahl, jedes Mal, wenn Sie die Tastatur drücken, und dann das Array nach einer festen Regel durchlaufen, damit der entsprechende Eintrag gefunden werden kann;

Aktivierungsmethode:

// search-test-inner ---> Outermost div

// Suchwert ---> Eingabefeld
// Suchwertliste ---> Suchergebnisse anzeigen div
// search-li ---> Suchelemente
new SEARCH_ENGINE("search-test-inner", "search-value", "search-value-list", "search-li");
Hinweis: Der Sucheintrag sowie zwei temporäre Daten, Datenname und Datentelefon, werden zum Speichern chinesischer Zeichen und Zahlen verwendet.

Hinweis: Die Pinyin-Konvertierung verwendet ein Plug-in namens jQuery.Hz2Py-min.js. Da dieses Plug-in nur den Wert in der Eingabe konvertieren kann, gibt es einen zusätzlichen Schritt im Code eine temporäre Eingabe und dann konvertieren.

HTML:

Code kopieren Der Code lautet wie folgt:

   

       
       

   

   

       

           
• 
                  13914157895
                  战士
             

           
• 
                  15112357896
                  牧师
             

           
• 
                  13732459980
                  盗贼
             

           
• 
                  18015942365
                  德鲁伊
             

           
• 
                  15312485698
                  武僧
             

           
• 
                  13815963258
                  死灵法师
             

           
• 
                  13815934258
                  圣骑士
             

       

   

CSS:

复制代码 代码如下:

* { Auffüllung: 0; Rand: 0; }
ol, ul { list-style: none; }
body { Schriftgröße: 12px; Farbe:#333; }
.search-test-inner { margin: 100px auto; Polsterung: 10px; Breite: 400px; Hintergrund: #e0e0e0; Randradius: 10px; Kastenschatten: 1px 2px 6px #444; }
.search-val-inner { margin-bottom: 20px; Polsterung: 10px; Hintergrund: #fff; }
.member-list-inner .search-li { padding: 10px; }
.search-value-list { margin-top: 10px; }
.search-value-list li { padding: 5px; }
.member-list-inner .search-li .phone,
.search-value-list li .phone { float: right; }
.search-value { width: 100%; Höhe: 30px; Zeilenhöhe: 30px; }
.tips { Schriftstärke: fett; }

JS:

复制代码 代码如下:

//------------------------------------------------ ---【Initialisierung】
Funktion SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){
//Array zum Speichern von Pinyin, chinesischen Zeichen und Zahlen
This.searchMemberArray = [];
//Aktionsobjekt
This.dom = $("." dom);
//Suchfeld
This.searchInput = "." searchInput;
//Suchergebnisfeld
This.searchResultInner = this.dom.find("." searchResultInner);
//Liste der Suchobjekte
This.searchList = this.dom.find("." searchList);
//In Pinyin konvertieren und im Array speichern
This.transformPinYin();
//Suchereignis binden
This.searchActiveEvent();
}
SEARCH_ENGINE.prototype = {
//----------------In Pinyin konvertieren und Pinyin, chinesische Schriftzeichen und Zahlen im Array speichern】
TransformPinYin : function(){
//Datenobjekte vorübergehend speichern
           $("body").append('');
        var $pinyin = $("input.pingying-box");
for(var i=0;i // Namen speichern und in Pinyin umwandeln
               $pinyin.val(this.searchList.eq(i).attr("data-name"));
//Chinesische Schriftzeichen in Pinyin konvertieren
          var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,"");
//Chinesische Schriftzeichen
          var cnCharacter = this.searchList.eq(i).attr("data-name");
Zu           var digital = this.searchList.eq(i).attr("data-phone");
​​​​​​ //In Array speichern
This.searchMemberArray.push(pinyin "&" cnCharacter "&" digital);
}
//Temporäres Speicherdatenobjekt löschen
         $pinyin.remove();
},
//--------------------------------[Fuzzy-Suchschlüsselwort]
fuzzySearch : function(type,val){
      var s;
        var returnArray = [];
​​​​ //Pinyin
If(type === "pinyin"){
          s = 0;
}
           //Chinesische Schriftzeichen
          else if(type === "cnCharacter"){
          s = 1;
}
​​​​ //Nummer
           else if(type === "digital"){
          s = 2;
}
for(var i=0;i                                 // Enthält die Zeichen
If(this.searchMemberArray[i].split("&")[s].indexOf(val) >= 0){
                 returnArray.push(this.searchMemberArray[i]);
            }
}
         return returnArray;
},
//--------------【Suchergebnisse ausgeben】
PostMemberList: function(tempArray){
      var html = '';
//Es gibt Suchergebnisse
        if(tempArray.length > 0){
            html = '

搜索结果（' tempArray.length '）

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

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

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

无搜索结果……

';
            }else{
                this.searchResultInner.html("");
            }
        }
        this.searchResultInner.html(html);
    },
    //--------------【绑定搜索事件】
    searchActiveEvent : function(){
        var searchEngine = this;
        $(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种情况
            //拼音
            if(pinYinRule.test(val)){
                tempArray = searchEngine.fuzzySearch("pinyin",val);
            }
            //汉字
            sonst if(cnCharacterRule.test(val)){
                tempArray = searchEngine.fuzzySearch("cnCharacter",val);
            }
            //数字
            sonst if(digitalRule.test(val)){
                tempArray = searchEngine.fuzzySearch("digital",val);
            }
            sonst{
                searchEngine.searchResultInner.html('

无搜索结果……

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

Ist der Effekt nicht großartig? Freunde, Sie können ihn nach der Verschönerung in Ihren eigenen Projekten verwenden