Automatische Eingabeaufforderungsfunktion bei der Suche basierend auf Javascript_Javascript-Kenntnissen-js-Tutorial-php.cn

Automatische Eingabeaufforderungsfunktion bei der Suche basierend auf Javascript_Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 16:24:14

Original

1025 Leute haben es durchsucht

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