Percorrer Lista - Autocompletar Ajax+ASP

Fagner Dos Santos · Dezembro 20, 2011

Galera, estou precisando de criar uma forma de percorrer uma lista que aparece quando digito uma palavra no sistema de busca. É um Autocompletar que criei com ASP + AJAX.

Acontece que agora preciso percorrer a lista com as setas UP e DOWN do teclado para selecionar os dados da busca. Quando pressionar enter também seleciona o resultado e preencher o INPUT. Quando clicar em um dos resultados também preencer o INPUT.

Igual acontece no google.

Veja o script funcionando aqui: http://www.ipascodonto.com.br/busca/

O código da busca com autocomplete:

Default.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Busca Com AJAX</title>

<style>
ul{
    position:relative;
    list-style-position:outside;
    list-style:none;
    padding:0;
    margin:0;
}
li{
    font-size:16px;
    list-style:none;
    margin:0;
    overflow:hidden;
    padding:0;
    cursor:pointer;
    padding:4px 5px;
}
.resultado{
    width:390px;
    border:1px solid;
    font-family:Arial, Helvetica, sans-serif;
    position:absolute;
    visibility:hidden;
}
#main{
    width:460px;
    position:relative;
}
.inputAuto{
    text-transform:uppercase;
}
</style>

&lt;script type="text/javascript">
  function showHint(str)
  {
  var xmlhttp;
  if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  document.getElementById("txtHint").style.visibility='hidden';
  return;
  }
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    document.getElementById("txtHint").style.visibility='visible';
    }
  }
  xmlhttp.open("GET","busca.asp?palavra="+str,true);
  xmlhttp.send();
 };
</script>


</head>
<body onload="document.form.nome.focus();">

<h3>AUTOCOMPLETAR:</h3>

<%'===================================================================%>
<div id="main">
    <form name="form"> 
       <input type="text" id="nome" onkeyup="showHint(this.value)" size="60" autocomplete="off" class="inputAuto" name="nome" />
        <input type="submit" value="Buscar" />
       <div id="txtHint" class="resultado" align="left"></div>
    </form>
</div>

<%'===================================================================%>

</body>
</html>

Busca.asp

<%
response.expires=-1

'Conexão
Set conexao = Server.CreateObject("ADODB.Connection")
conexao.Open = "Driver=MySQL ODBC 5.1 Driver; DATABASE=******; SERVER=******; UID=******; PASSWORD=******"

palavra = request("palavra")

'---------------------------------------
response.write "<ul id='busca' class='nav'>"
'---------------------------------------
sql = "SELECT * FROM usuariospas WHERE nome LIKE '%"&palavra&"%' or matr LIKE '%"&palavra&"%'"
Set rs = conexao.execute(sql)
qtd = 15
conta = 0
    While conta < qtd and not rs.eof
        conta = conta + 1
        response.write "<li><span><b>"
        'response.write "<a href=''>"
        response.write trim(Encode_UTF8(rs("nome")))&"<br>"
        'response.write "</a>"
        response.write "</b></span></li>"
        rs.movenext
    Wend
Set rs = Nothing
Set conexao = Nothing
'---------------------
response.write "</ul>"
'---------------------
%>

Entrar

Percorrer Lista - Autocompletar Ajax+ASP

Pergunta

Fagner Dos Santos

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades