Jquery touche de la flèche de navigation
J'ai ces textfield et le menu déroulant pour un Facebook comme l'autosuggestion:
<input type="text" id="search" name="search_fld"/>
<div id="display">
<div class="display_box">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>
Mon CSS:
.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
Comment puis-je atteindre pour réussir le hover' état avec sur la touche flèche bas de mon entrée "search_fld" à la première "display_box" et ainsi de suite pour tous les "affichage" divs?
Ici est un lien de la jsfiddle code.
OriginalL'auteur luca | 2011-04-04
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez pas imiter l'état de pointage parfaitement.. il n'y a pas d'échappatoire à l'ajout de "réel" de la classe avec le même style:
Maintenant ce code "naviage" les éléments:
Cela va se "souvenir" de l'index de la dernière "sélectionné" et passer au suivant ou au précédent élément, à l'aide de la
eq()
fonction et en ajoutant la classe à partir de ci-dessus pour que l'élément sélectionné.Mise à jour jsFiddle.
class
est un nom réservé. Vous devez changer que var nom ou ça ne marchera pas, au moins sur jsfiddle. Version de travail: jsfiddle.net/supertrue/MKZSE/51correcte, il a été de travailler en arrière quand j'ai écrit ce probablement
class
a été marquée comme étant réservés à un moment plus tard. N'a pas averti de votre commentaire, mais mieux vaut tard que jamais! 🙂Je sais que c'est de retour à partir de 2012, mais comment voulez-vous ensuite de sélectionner l'élément sur "Entrée" du clavier appuyez sur?
simple question de la manipulation du mot de code 13, voir ce violon. Au lieu d'alerter la valeur sélectionnée, vous pouvez l'envoyer via AJAX ou tout ce que vous voulez. 🙂
OriginalL'auteur Shadow Wizard
Sûr que c'est laid. Sur violon ici.
OriginalL'auteur Santosh Linkha
Pour la mise en œuvre de l'autosuggestion champ de texte, il serait préférable d'utiliser 'datalist' tag comme ci-dessous:
Obtenir plus de détails sur la balise datalist à partir d'ici: http://www.w3schools.com/tags/tag_datalist.asp
OriginalL'auteur Ankit
vous pouvez utiliser une touche de direction en tant que champ de saisie d'arrière-plan à l'aide de css ou utiliser une superposition de s'étendre sur le champ de saisie avec le fond de la flèche de l'image et de la rendre visible dans l'état de pointage à l'aide de css ou js
OriginalL'auteur thecodeparadox