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

William Bruno · Dezembro 20, 2011

faça uma função que dispare no click de cada LI, e jogue no value do teu input lá em cima.

alguns exemplos:

http://wbruno.com.br/blog/2011/11/19/navegando-pela-lista-suggest-setas-teclado-autocomplete-teclado-javascript/

http://wbruno.com.br/blog/2010/01/08/suggest-ajax-jquery-phpmysql/

se você implementar corretamente a minha dica, irá funcionar.

Fagner Dos Santos · Dezembro 20, 2011

É por aí mesmo, mas 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.

William Bruno · Dezembro 20, 2011

O primeiro post que passei faz isso.

Mostre como você tentou implementar.

Fagner Dos Santos · Dezembro 20, 2011

O primeiro post que passei faz isso.

Mostre como você tentou implementar.

Amigo,

Testei o código que você postou no link mas não deu certo. Quando digito a letra ele já faz a busca rápida e não dá a chance de selecionar o resultado que quero. Dá uma olhada aí:

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

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">  
jQuery(document).ready(function(){  
   var active = -1;  
   jQuery("#nome").keypress(function( event ){  
       var suggest_a = jQuery('#busca a');  
       var qnts_a = suggest_a.length;

       if( 40==event.keyCode )//seta baixo  
           activeactive = 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">  
#main { position: relative; }  
#busca {  
   /*position: absolute;  */
}  
.active {  
   background:#900;
color:#FFF;
}  
</style>

<input type="text" id="nome" onkeyup="showHint(this.value)" size="60" autocomplete="off" class="inputAuto" name="nome" />

'---------------------------------------
response.write "<ul id='busca'>"
'---------------------------------------
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><b>"
	response.write "<a>"
	response.write trim(Encode_UTF8(rs("nome")))&"<br>"
	response.write "</a>"
	response.write "</b></li>"
	rs.movenext
Wend
Set rs = Nothing
Set conexao = Nothing
'---------------------
response.write "</ul>"
'---------------------

William Bruno · Dezembro 20, 2011

você precisa impedir que essa função:

onkeyup="showHint(this.value)"

seja disparada junto com a outra das setas.

veja pelo keyCode das teclas, usando o objeto event.

Fagner Dos Santos · Dezembro 20, 2011

você precisa impedir que essa função:
onkeyup="showHint(this.value)"
seja disparada junto com a outra das setas.

veja pelo keyCode das teclas, usando o objeto event.

Não tem como impedí-la, pois, é ela quem me dá os dados pelo AJAX.

Só se tiver um jeito de chamar a função ajax pelo Jquery.

William Bruno · Dezembro 20, 2011

por exemplo, removendo da tag, e colocando aqui:

        if( 40==event.keyCode )//seta baixo  
           activeactive = active>=(qnts_a-1) ? 0 : active+1;  
       else if( 38==event.keyCode )//seta cima  
           active = ( active<=0 ) ? qnts_a-1 : active-1;
       else
          showHint( jQuery( this ).val() );

Fagner Dos Santos · Dezembro 20, 2011

por exemplo, removendo da tag, e colocando aqui:

        if( 40==event.keyCode )//seta baixo  
           activeactive = active>=(qnts_a-1) ? 0 : active+1;  
       else if( 38==event.keyCode )//seta cima  
           active = ( active<=0 ) ? qnts_a-1 : active-1;
       else
          showHint( jQuery( this ).val() );

Então amigo, acho que tem jeito sim mas como é ajax e asp, não estou sabendo operar isso com o Jquery, eu já vi sim alguma coisa por aí, inclusive na sua segunda opção, tem um exemplo de ajax com o php, mas não consegui entender como ele vai enviar a variável para o asp pelo Jquery

 $("input[name='suggest']").keyup(function(){
                       createList('.suggest');
                       $.ajax({
                               type: "GET",//apenas pra ficar mais fácil de debugar, pode mudar para POST depois
                               url: "function.php",
                               data: "parte="+$(this).val(),
                               success: function( data ){
                                       $("#suggest").html( data );
                               }
                       });
               });

Por exemplo, eu mudei o php para asp, mas chama nenhum resultado na lista:

$("input[name='suggest']").keyup(function(){
                       createList('.suggest');
                       $.ajax({
                               type: "GET",//apenas pra ficar mais fácil de debugar, pode mudar para POST depois
                               url: "busca.asp",
                               data: "parte="+$(this).val(),
                               success: function( data ){
                                       $("#suggest").html( data );
                               }
                       });
               });

Para o asp pegar o valor tem que enviar algum dado que no caso do php ele pegou uma variável chamada "palavra".

Mas aqui no código jquery não encontrei onde gera essa variável.

William Bruno · Dezembro 20, 2011

ele envia aqui:

data: "parte="+$(this).val(),

você iria receber uma variavel parte no asp.

Fagner Dos Santos · Dezembro 20, 2011

Estou tentando aqui, só que pelo Jquery, eu teria que mudar como os dados são puxados, então não seria ajax. Mas como preciso que seja ajax pelo fato da aplicação exigir uma busca mais rápida, o que preciso é somente um evento em javascript que leia e faça a rolagem com o teclado ou mouse pelos dados da lista e preencher o INPUT.

O código do wbruno é o início do caminho.

William Bruno · Dezembro 20, 2011

o código jQuery que te passei usa ajax.

você está meio que misturando termos e conceitos..

ps: eu sou o wbruno.

Fagner Dos Santos · Dezembro 20, 2011

o código jQuery que te passei usa ajax.

você está meio que misturando termos e conceitos..

ps: eu sou o wbruno.

Eu sei sim wbruno, não estou confundindo, é que Jquery é uma coisa e Ajax é outra. Mas brilhantemente sua aplicação tem uma composição das duas técnicas.

Consegui fazer com que o asp pegue a variável. Eu fiz mais uns teste aqui, mas com o seu exemplo de 'suggest' ele não navega pelos valores com o teclado, pelo que vi ele apenas tem a opção de clicar sobre o valor e preencher o input abaixo, dá uma olhada aí

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

Tem como agora com esse exemplo implementar aquela técnica do outro exemplo, onde ele coloca um event definindo as funções das teclas:

if( 40==event.keyCode )//seta baixo  
           activeactive = 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() );

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


%>

Fagner Dos Santos · Dezembro 23, 2011

Estou com um problema com esse autocompletar.

Ele não está resetando a variável que define em qual posição está o item selecionado anteriormente.

Por exemplo se faço a busca seleciono o terceiro item da lista, quando volto a fazer a segunda busca o item selecionado na lista que aparece é o terceiro e não o primeiro.

As variáveis 'selectDiv' e this.point não estão resetando. Como faço par dar um clear nelas.

Se alguém puder ajudar.

Arquivado

Percorrer Lista - Autocompletar Ajax+ASP

Recommended Posts

Fagner Dos Santos 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

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

William Bruno 1501

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

William Bruno 1501

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

William Bruno 1501

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

William Bruno 1501

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

William Bruno 1501

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

Fagner Dos Santos 2

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

Fóruns

Tempo Real

Informação importante