Publicado em 20 de dez.

Percorrer Lista - Autocompletar Ajax+ASP

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 para selecionar os dados da busca.

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>

<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>"
'---------------------
%>

Desde já agradeço.

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Daniel1· 20 de dez.

veja se assim funciona:

response.write "<table width='200'>"
'---------------------------------------
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 "<tr>"
 response.write "<td>"&trim(Encode_UTF8(rs("nome")))&"</td><td><input type='checkbox' value='"&rs("id")&"' name='ncheck' /></td>"
 response.write "</tr>"
 rs.movenext
 Wend

Set rs = Nothing
Set conexao = Nothing
'---------------------
response.write "</table>"
'---------------------

espero ajudar

até mais

desconsidere meu post anteriror entendi o que você está querendo eu já respondo

Não seria mais ou menos isso ?

palavra = request("palavra")

 response.write "<li><span><b>"
 'response.write "<a href='perfil.asp?id='"&rs("id")&">"
 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>"
'---------------------

mas ai você só pegaria só um dado por vez, não sei o que você faz com o esses dados então inventei uma página perfil somente para seguir uma lógica, então na pagina perfil você faz um novo select e pega o ID do usuário com um request e mostra os outros dados numa table,div,etc por exemplo

Fagner Dos Santos· 20 de dez.

Entendi o que você disse Daniel1, mas não é exatamente isso.

Quando aparece os resultados abaixo quero Navegar entre eles com o teclado, com as setas (arrow) UP e DOWN. E quando eu navegar entre eles, o item em que eu estiver, pressiono ENTER e o valor vai para o INPUT para daí eu levar o resultado para outra pagina.

Assim como acontece nas sugestões de busca do google. Mas eu prefiro usuar o AJAX do que o JQUERY para pegar os dados porque é mais rápido.

Desculpa, mas acho que deu pra explicar.

Daniel1· 21 de dez.

olha eu fiz com select você usa o tab para selecionar o arquivo e as setas up down para mudar, agora a parte de enviar tá muito complicado,para você ter uma idéia estou desde as 21:00 tentando agora são 1:58 :natalsad: tentei pra caramba e não consegui mudar de página, eu se fosse você usria jquery

palavra = request("palavra")

'---------------------------------------
Response.write "<select size=5 class='nav' id='busca' onchange='redireciona(this.value)'>"
'---------------------------------------
sql = "SELECT * FROM produtos WHERE nome LIKE '%"&palavra&"%'"
Set rs = conexao.execute(sql)

qtd =10
conta = 0
'
While conta < qtd and not rs.eof
conta = conta + 1

	response.write "<option id='oppt' value='"&rs("codigo")&"' >"
 response.write rs("nome")
 response.write "</option>"
 rs.movenext
 Wend

Set rs = Nothing
Set conexao = Nothing
'---------------------
response.write "</select>"
'---------------------

xanburzum· 21 de dez.

olha este link pode te judar

Fagner Dos Santos· 22 de dez.

Galera procurei, excrevi e tá indo a coisa.

Dêem uma olhada no link

http://www.ipascodonto.com.br/busca/

O script tá muito bom! e a consulta está muito rápida, diferente do jquery que carrega muitos scripts e às vezes fica meio lento.

Agora preciso implementar a parte do click no valor para carregar no input e para ficar ótimo estou precisando de uma função que retire o style do item selecionado quando passar o mouse. Assim o item que passa a ser ativo será o item em que o mouse estiver apontando.

Se repararem, no jeito que está agora, o item selecionado fica sendo o do teclado e do mouse. Queria mudar isso.

<%@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>

<script>

//CRÉDITOS

//SITES ACESSADOS:
//http://stackoverflow.com/questions/402448/access-div-contents-using-up-and-down-arrow-keys-using-javascript
//http://www.codingforums.com/showthread.php?t=175204
//http://www.webdeveloper.com/forum/showthread.php?t=100179
//http://www.java2s.com/Tutorial/JavaScript/0280__Document/documentonkeyup.htm
//http://www.w3schools.com/asp/asp_ajax_asp.asp
//http://wbruno.com.br/blog/2010/01/08/suggest-ajax-jquery-phpmysql/
//http://wbruno.com.br/blog/2011/11/19/navegando-pela-lista-suggest-setas-teclado-autocomplete-teclado-javascript/

</script>

<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;
font-weight:bold;
}

li:hover{

background-color:#C00;
color:#FFF;
}
.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;
}
.active{
background-color:#C00;
color:#FFF;
}
</style>

<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" name="nome" id="nome" size="60" autocomplete="off" />
 <input type="submit" value="Buscar" />
<div id="txtHint" class="resultado" align="left"></div>
</form>
</div>

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

<%'****************************************************************************%>
<script type="text/javascript">
<!--

document.onkeydown = myKeyDownHandler;
function myKeyDownHandler(event){
 if ( typeof event == "undefined" ) {event = window.event};
 Vkey = event.keyCode;
 var vnome = document.getElementById('nome').value;
 if (Vkey !== 40 && Vkey !== 38){
 showHint(vnome);
 };
};

-->
<!--

function autocomplete( inputname, containerId ) {
 var ac = this;
 this.textbox = document.getElementById(inputname);
 this.div = document.getElementById(containerId);
 this.list = this.div.getElementsByTagName('li');
 this.pointer = null;

 this.textbox.onkeydown = function( e ) {
 e = e || window.event;
 switch( e.keyCode ) {
 case 38: //up
 ac.selectDiv(-1);
 break;
 case 40: //down
 ac.selectDiv(1);
 break;
 }
 }
 this.selectDiv = function( inc ) {
 if( this.pointer !== null && this.pointer+inc >= 0 && this.pointer+inc < this.list.length ) {
 this.list[this.pointer].className = '';
 this.pointer += inc;
 this.list[this.pointer].className = 'active';
 this.textbox.value = this.list[this.pointer].innerHTML;
 }
 if( this.pointer === null ) {
 this.pointer = 0;
 this.list[this.pointer].className = 'active';
 this.textbox.value = this.list[this.pointer].innerHTML;
 }
 }
}
new autocomplete( 'nome', 'txtHint' );

-->
</script>
<%'****************************************************************************%>

</body>
</html>

O arquivo da busca.asp ficou assim:

<%
response.expires=-1

'Conexão no meu servidor local
'-----------------------------------------------------
Set conexao = Server.CreateObject("ADODB.Connection")
conexao.Open = "Driver={MySQL ODBC x.x DRIVER}; DATABASE=*******; SERVER=; UID=*; PASSWORD=***;"

palavra = request("palavra")

'---------------------------------------
sql = "SELECT * FROM usuariospas WHERE nome LIKE '%"&palavra&"%' or matr LIKE '%"&palavra&"%' ORDER BY nome"
Set rs = conexao.execute(sql)
qtd = 15
conta = 0
While conta < qtd and not rs.eof
conta = conta + 1

	response.write "<li id='lista' class='liitem'>"
	response.write rs("nome")
	response.write "</li>"
	rs.movenext

Wend
Set rs = Nothing
Set conexao = Nothing
'---------------------