Maison > interface Web > js tutoriel > Javascript implémente les compétences de commutation des touches haut et bas du clavier de la zone de recherche ecshop control_javascript

Javascript implémente les compétences de commutation des touches haut et bas du clavier de la zone de recherche ecshop control_javascript

WBOY
Libérer: 2016-05-16 16:08:44
original
1213 Les gens l'ont consulté

Dans la fonction createSelect(), un objet est renvoyé, et les deux méthodes de cet objet sont next()
et moveSelect() appelé dans prev() peut pointer correctement vers la fonction, vous pouvez également mettre
La fonction moveSelect() est placée à l'extérieur.

Copier le code Le code est le suivant :

/* Fonctionnement du clavier et options de recommandation de problèmes */
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 CLÉ = {
              UP : 38,
BAS : 40,
DEL : 46,
ONGLET : 9,
RETOUR : 13,
             ESC : 27,
RETOUR ARRIÈRE : 8,
              GAUCHE : 37,
DROITE : 39
        };
​​​​ clearTimeout(curDo);//Lorsque le clavier apparaît, l'opération d'acquisition de données ajax programmée doit être annulée
interrupteur (code) {
cas KEY.UP :
                                                                                                                                                                                                          en sélectionnant.next();
                 pause ;
cas KEY.DOWN :
                                                                                                                                                                                                  sélectionner.prev();                  pause ;
cas KEY.RETURN:
                    $('.suggest-hover').trigger('click');
                 pause ;
cas CLÉ.GAUCHE :
                 pause ;
cas CLÉ.DROITE :
                 pause ;
                 par défaut :
CurDo = setTimeout(getSuggest(),300);
                 pause ;
>
});
/* suggère une opération de sélection */
Fonction createSelect(){
        var CLASSES = {
              ACTIF : "suggérer un survol"
        };
         fonction moveSelect(step) {
            var listItems=$('.suggest-results li');
//Le nombre d'étapes dans le survol en cours
          var actif ;
Actif = $ ('.' Classses.active) .index (
);               listItems.eq(active).removeClass(CLASSES.ACTIVE);
              active = étape ;
                    si (actif < 0) {
                      active = listItems.size() - 1;
                  } else if (active >= listItems.size()) {
                    actif = 0 ;
            }
               var activeItem = listItems.eq(active).addClass(CLASSES.ACTIVE);
        };
         revenir {
              suivant:fonction(){
                  moveSelect(-1);
            },
               prev:function(){
                 moveSelect(1);
            }
        };
};

Ce qui précède est tout le contenu partagé avec vous dans cet article, j'espère qu'il vous plaira

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal