Ir para conteúdo
Fórum CódigoFonte.net

morce

Membros
  • Total de itens

    3
  • Registro em

  • Última visita

  1. 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&#201;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&#227;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 '--------------------- %>
  2. 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&#227;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>" '--------------------- %>
  3. 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&#227;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>" '--------------------- %>
×
×
  • Criar Novo...