Fagner Dos Santos

Percorrer Lista - Autocompletar Ajax+ASP

uma questão postou Fagner Dos Santos 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 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> <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>" '--------------------- %>

Percorrer Lista - Autocompletar Ajax+ASP

uma questão postou Fagner Dos Santos Ajax, JavaScript, XML, DOM

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

Dezembro 20, 2011

Checkbox / Carrinho De Compras Igual Fiat

pergunta respondeu ao carlosmandra de Fagner Dos Santos em Ajax, JavaScript, XML, DOM

Pra quem programa em asp a coisa fica assim: html: <table> <% contdet=0 do while not rsdet.eof %> <tr> <td align="right"> <div> <%=rsdet("valor")%> <input type="checkbox" name="val<%=contdet%>" id="val<%=contdet%>" onClick="result();" value="<%=rsdet("valor")%>" /> </div> </td> </tr> <% contdet=contdet+1 rsdet.movenext loop %> </table> javascript <script language="JavaScript"> function result(){ <% contres=0 contres2=0 while contres < contdet %> if(document.getElementById("val<%=contres%>").checked){ var a<%=contres%> = document.getElementById("val<%=contres%>").value; } else { var a<%=contres%> = 0.00; } <% contres = contres + 1 wend %> var y = 0.00; var x = <% while contres2 < contdet response.write "parseFloat(a"&contres2&")+" contres2 = contres2+1 wend response.write "parseFloat(y)" &vbcrlf %> document.getElementById('fatura_frame').innerHTML=x; } </script> <% rsadm.close set rsadm = nothing %>

Entrar

Total de itens

Registro em

Última visita

Sobre Fagner Dos Santos