Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera eu estou com um código jQuery que gera sugestões aos usuários quando eles procuram por algo usando o formulário de pesquisa, este código esta fazendo a sua função corretamente, o problema é que eu não consigo fazer com que ele permita ao usuário navegar pelas sugestões com as setas do teclado(para cima e para baixo igual ao google) ele só destaca a opção desejada colocando o ponteiro do mouse em cima e isso por que existe um :hover na div em que aparecem as sugestões. vou deixar o código que gera a saída das sugestões para div suggestions e também o formulário usado, espero que possam me ajudar ! agradeço desde já !
O formulário
<form id="searchform">
<div>
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" />
</div>
<div id="suggestions"></div>
</form>google.load("jquery", "1.3.1");
google.setOnLoadCallback(function(){});
function lookup(inputString) {
if(inputString.length == 0) {});
}
}Obrigado por responder William e parabéns pelo seu código, então, você saberia me informar onde eu poderia aplicar a parte de script deste código que você me passou ? sera que só colocando o meu formulário no lugar do seu funcionária ou eu precisaria mexer também na parte jQuery ?
vc precisa adaptar algumas coisas. Tente e veja as diferenças.
tá bem simples.
Ok vou tentar aqui, depois eu informo os resultados !
Bom, eu tentei adaptar aqui e não consegui cara, meu código ficou o seguinte:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var active = -1;
jQuery("input[name='autocomplete']").keypress(function( event ){
var suggest_a = jQuery('#suggestions a');
var qnts_a = suggest_a.length;
if( 40==event.keyCode )//seta baixo
active = active>=(qnts_a-1) ? 0 : active+1;
else if( 38==event.keyCode )//seta cima
active = ( active<=0 ) ? qnts_a-1 : active-1;
var a = suggest_a.removeClass('active').eq( active ).addClass('active');
jQuery( this ).val( a.text() );
});
});
</script>
<style type="text/css">#suggestions {
position: absolute;
top: 20px;
left: 0;
}
.active {
background: #ccc;
}
</style>
</head>
<body>
<div>
<label>
<form id="searchform">
<div>
<input type="text" size="30" value="" name="autocomplete" id="inputString" onkeyup="lookup(this.value);" />
</div>
</form>
<ul id="suggestions"></ul>
</label>
</div>
</body>
</html>quem sabe seja preciso só fazer alguns ajustes que eu não fiz, espero que você possa me ajudar, obrigado desde já !
exemplo de como fazer:
http://wbruno.com.br/jquery/navegando-pela-lista-suggest-setas-teclado-autocomplete-teclado-javascript/