J'ai ces menu de Textfield and Dropdown pour un Facebook comme Autosuggestion: mon CSS: Comment puis-je atteindre pour Passez l'état "Survol" avec Voici un Liez le code Jsfiddle .
4 Réponses :
Vous pouvez utiliser une touche fléchée comme fond de champ de saisie à l'aide de CSS / Utilisez une superposition sur le champ d'entrée avec l'image de flèche d'arrière-plan et rendez-la visible dans l'état de survol à l'aide de CSS ou de JS
Bien sûr c'est moche. Sur violon ici .
<script src="jquery.js"></script>
<script>
$(function (){
$('.display_box').hover(function (){
$(this).attr('class', 'display_box current')
}, function (){
$(this).attr('class', 'display_box');
});
$('#search').keyup(
function (e){
var curr = $('#display').find('.current');
if (e.keyCode == 40)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).next().attr('class', 'display_box current');
}
else{
$('#display div:first-child').attr('class', 'display_box current');
}
}
if(e.keyCode==38)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).prev().attr('class', 'display_box current');
}
else{
$('#display div:last-child').attr('class', 'display_box current');
}
}
}
)
});
</script>
<style>
.current{
background:#3b5998;
color:#FFFFFF;
}
</style>
<input type="text" id="search" name="search_fld"/>
<div id="display">
<div class="display_box current">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>
Même idée que moi, juste une implémentation différente. :)
Vous ne pouvez pas imiter parfaitement l'état de navigation .. Il n'y a pas d'évasion d'ajouter une "vraie" classe avec le même style:
window.displayBoxIndex = -1;
$("#search").keyup(function(e)
{
if (e.keyCode == 40)
{
Navigate(1);
}
if(e.keyCode==38)
{
Navigate(-1);
}
});
var Navigate = function(diff) {
displayBoxIndex += diff;
var oBoxCollection = $(".display_box");
if (displayBoxIndex >= oBoxCollection.length)
displayBoxIndex = 0;
if (displayBoxIndex < 0)
displayBoxIndex = oBoxCollection.length - 1;
var cssClass = "display_box_hover";
oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}
Si vous l'avez fait, alors, honnêtement ... ce serait beaucoup mieux que le mien
Classe est un nom réservé. Vous devez changer ce nom de var ou ne fonctionnera pas, au moins sur Jsfiddle. Version de travail: jsfiddle.net/supertrue/mkzse/51
@superTrue correct, il travaillait quand j'ai écrit ceci probablement classe était marqué comme réservé à un moment donné. N'a pas été informé de votre commentaire mais meilleur tard que jamais! :-)
Je sais que c'est de retour de 2012 mais comment sélectionneriez-vous l'élément sur le clavier "Entrée" Press?
@Carlos Simple question de manipulation du code-clés 13, voir dans ce violon . Au lieu d'alerter la valeur sélectionnée, vous pouvez l'envoyer via AJAX ou tout ce que vous voulez. :)
Pour implémenter le champ de texte d'autosuggestion, il serait préférable d'utiliser la balise "Datatalist" comme suit:
<input list="search" name="search_fld"/>
<datalist id="search">
<option value="Luca"/>
<option value="David"/>
<option value="Mark"/>
</datalist>