Heim > Web-Frontend > js-Tutorial > Javascript implementiert ecshop-Suchfeld-Tastatur-Auf- und Ab-Tastenumschaltung control_javascript-Fähigkeiten

Javascript implementiert ecshop-Suchfeld-Tastatur-Auf- und Ab-Tastenumschaltung control_javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:08:44
Original
1212 Leute haben es durchsucht

In der Funktion createSelect() wird ein Objekt zurückgegeben, und die beiden Methoden dieses Objekts sind next()
und moveSelect(), das in prev() aufgerufen wird, korrekt auf die Funktion verweisen kann, können Sie auch
eingeben Die Funktion moveSelect() wird außerhalb platziert.

Code kopieren Der Code lautet wie folgt:

/* Tastaturbedienung und Problemempfehlungsoptionen */
var curDo = null;
var select = createSelect();
$('#keywords').keyup(function(e){
var theEvent = e ||. window.event;
code = theEvent.keyCode ? theEvent.keyCode : (theEvent.which ? theEvent.which : theEvent.charCode)
      var KEY = {
              UP: 38,
UNTEN: 40,
DEL: 46,
TAB: 9,
RÜCKGABE: 13,
             ESC: 27,
RÜCKTASTE: 8,
              LINKS:37,
RECHTS:39
        };
​​​​ clearTimeout(curDo);//Wenn die Tastatur angezeigt wird, sollte der geplante Ajax-Datenerfassungsvorgang abgebrochen werden
switch(code) {
case KEY.UP:
                                                                                                                                                                                                 selected.next();
                 Pause;
case KEY.DOWN:
                                                                                                                                                                                                 selected.prev();                  Pause;
case KEY.RETURN:
                    $('.suggest-hover').trigger('click');
                 Pause;
case KEY.LEFT:
                 Pause;
case KEY.RIGHT:
                 Pause;
                 Standard:
CurDo = setTimeout(getSuggest(),300);
                 Pause;
}
});
/* Auswahlvorgang vorschlagen */
Funktion createSelect(){
        var CLASSES = {
              AKTIV: „suggest-hover“
        };
         Funktion moveSelect(step) {
            var listItems=$('.suggest-results li');
//Die Anzahl der Schritte im aktuellen Hover
          var active;
Active = $ ('.' Classses.active) .index ();               listItems.eq(active).removeClass(CLASSES.ACTIVE);
              aktiv = Schritt;
                    if (aktiv < 0) {
                      active = listItems.size() - 1;
                  } else if (active >= listItems.size()) {
                    aktiv = 0;
            }
               var activeItem = listItems.eq(active).addClass(CLASSES.ACTIVE);
        };
         return {
              next:function(){
                  moveSelect(-1);
            },
               prev:function(){
                 moveSelect(1);
            }
        };
};

Das Obige ist der gesamte Inhalt, der in diesem Artikel mit Ihnen geteilt wird. Ich hoffe, er wird Ihnen gefallen

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage