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 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.

Daniel1 · Dezembro 20, 2011

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 "<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='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 · Dezembro 20, 2011

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 · Dezembro 21, 2011

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 · Dezembro 21, 2011

olha este link pode te judar

Fagner Dos Santos · Dezembro 22, 2011

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" onkeyup="showHint(this.value);" /-->
<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
'---------------------


%>

Entrar

Arquivado

Percorrer Lista - Autocompletar Ajax+ASP

Recommended Posts

Fagner Dos Santos 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Daniel1 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fagner Dos Santos 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Daniel1 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fagner Dos Santos 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante