Publicado em 12 de ago.

Consulta de Seleção - Filtro

Boa tarde a todos.

Eu preciso colocar um filtro no campo 'cliente' que quando eu começar a digitar já apareça os nomes que estão cadastrado na base clientes.

Segue o código:

<input name="cliente" type="text" class="fct2" id="cliente" size="20" maxlength="255" />
<%
while not rs2.eof
cod=rs2("cod_cliente")
%>
<option value="<%=rs2("cod_cliente")%>" selected="selected"><%=rs2("cliente")%></option>
<%
rs2.movenext
wend
%>

</select>

Antes esse campo era um select: "<select name="cod_cliente" size="1" class="fct2">""

Agora gostaria de transformar em um "input name".

Alguém poderia me ajudar.

Obrigado pela atenção.

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

xanburzum· 12 de ago.

usa Um autocomplete, tem vários exemplos que postei no fórum, dá uma olhada.

Marcelo Pescador· 13 de ago.

Eu não encontrei seu posta xanburzum.

Se alguém ainda puder me ajudar?

xanburzum· 13 de ago.

olha este link

1. ajaxPage3.ASP (página principal)
2. ajaxPage3a.JS (javascript / Ajax)
3. ajaxPage3a.ASP (a página que está lendo dados do servidor)

lembrando que você também pode usar jQuery para a função "autocomplete"

ajaxPage3.asp file

<%@language="vbscript" codepage="1252"%>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
Dim qry, iBrand
iBrand = ""
qry = trim(request.Querystring("qFunc"))
if qry = "jxBrand" then
iBrand = trim(request.Querystring("qBrand"))
end if
%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Autocomplete AJAX + ASP</title>
<meta http-equiv="content-type" content="text/html; charset=us-ascii" />
<script type="text/javascript" src="ajaxPage3a.js"></script>
</head>
<body>
<form name="aspForm" action="ajaxPage3.asp" method="post" />
<div style="margin-top:15px; border:1px solid #3366ff; padding:10px;">
 <label for="jBrand">Car Brand: </label><div id="brandDiv" style="position:absolute; z-index:100;" /></div> 
 <input id="txtBrand" name="txtBrand" value="<%=trim(iBrand)%>" onKeyUp="srchBrand(this.value)" />
</div>
</form>
<div style="margin-top:15px; border:1px solid #3366ff; padding:10px;">
O exemplo Autocomplete fornece sugestões enquanto você digita no campo. Aqui, as sugestões são marcas, exibido quando um personagem está inserido no campo. <br /> <br />
A fonte de dados é um ASP script server-side clássico que retorna dados HTML, especificados através de uma URL simples para o opção de origem. </div>
</body>
</html>

ajaxPage3a.JS file

/ car brand searching script /

var a;
function srchBrand(varTxt){
 if(varTxt.length>0){
 var b="ajaxPage3a.asp?sid="+Math.random()+"&qAction=Search&qBrand="+varTxt;
 a=GetXmlHttpObject(recResult);
 document.getElementById("brandDiv").style.display='';
 document.getElementById("brandDiv").innerHTML="<img src='/images/arrow.gif'/>";
 a.open("GET",b,true);a.send(null);}
 else{
 document.getElementById("brandDiv").style.display='none';
 document.getElementById("brandDiv").innerHTML="";}}

function recResult(){
 if(a.readyState==4||a.readyState=="complete"){
 document.getElementById("brandDiv").innerHTML=a.responseText;}}

/ asynchronous javascript object /

function GetXmlHttpObject(handler){
 var d=null;
 if(navigator.userAgent.indexOf("MSIE")>=0){
 var e="Msxml2.XMLHTTP";
 if(navigator.appVersion.indexOf("MSIE 5.5")>=0){
 e="Microsoft.XMLHTTP";}
 try{
 d=new ActiveXObject(e);
 d.onreadystatechange=handler;
 return d;}
 catch(e){
 alert("Browser Error. Unable to perform AJAX feature");
 return;}}

 if(navigator.userAgent.indexOf("Mozilla")>=0 || navigator.userAgent.indexOf("Opera")>=0){
 d=new XMLHttpRequest();
 d.onload=handler;
 d.onerror=handler;
 return d;}}

ajaxPage3a.ASP file

<%
Dim action, iBrand, iResult
action = trim(request.QueryString("qAction"))
if action = "Search" then
iBrand = trim(request.QueryString("qBrand"))

 'this part is actually a server-side Cobol COM wrapper or object that is fetching data as below;
 'DUMMY RESULT ONLY
 iResult = "<div style='border:1px #ccc solid; margin-top:23px; margin-left:5px; width:200px;'><table width='100%' cellpadding='0px' cellspacing='0px' align='center'>"
 iResult = iResult + "<tr bgcolor='#cccc99'><td style='width:100px'><a href='ajaxPage3.asp?qFunc=jxBrand&qBrand=Chevrolet'>Chevrolet</a></td></tr>"
 iResult = iResult + "<tr bgcolor='#ffffff'><td style='width:100px'><a href='ajaxPage3.asp?qFunc=jxBrand&qBrand=Ford'>Ford</a></td></tr>"
 iResult = iResult + "<tr bgcolor='#cccc99'><td style='width:100px'><a href='ajaxPage3.asp?qFunc=jxBrand&qBrand=Honda'>Honda</a></td></tr>"
 iResult = iResult + "<tr bgcolor='#ffffff'><td style='width:100px'><a href='ajaxPage3.asp?qFunc=jxBrand&qBrand=Hyundai'>Hyundai</a></td></tr>"
 iResult = iResult + "<tr bgcolor='#cccc99'><td style='width:100px'><a href='ajaxPage3.asp?qFunc=jxBrand&qBrand=Toyota'>Toyota</a></td></tr>"
 iResult = iResult + "</table></div>"

 response.write(iResult)

end if
%>
Outro exemplo da função de autosuggest

<html>
<head>
<title>Suggest</title>
<style type="text/css">

* {

margin: 0;
padding: 0;
list-style: none;
border: none;
}

form {

width: 400px;
margin: 0 auto;
}

form label {

display: block;
}

form label input {

margin: 2px;
padding: 2px;
border: 1px solid #000;
}
.suggest {
position: relative;
}

.suggest input {

width: 250px;
}
#suggest {
position: absolute;
top: 22px;
right: 64px;
background-color: #fff;
width: 248px;
text-align: left;
border: 1px solid #000;
}

#suggest li {

margin: 2px;
}

#suggest a {

display: block;
color: #000;
text-decoration: none;
}

#suggest a:hover {

background: #eee;
text-decoration: underline;
color: #f00;
}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name='suggest']").keyup(function(){
createList('.suggest');

$.ajax({ type: "GET",//apenas pra ficar mais fácil de debugar, pode mudar para POST depois url: "complete.asp", data: "palavra="+$(this).val(),

success: function( data ){
$("#suggest").html( data );
}
});
});

$("#suggest a").live('click', function( e ){
e.preventDefault();
var href = $(this).attr('href');
var id = href.split('=');

$("input[name='id']").val( id[1] );
$("input[name='nome']").val( $(this).text() );

$("#suggest").remove();
});
$("#suggest").mouseout(function(){
$("#suggest").remove();
});
});
function createList( el )

{

$("#suggest").remove();

var list = document.createElement('ul');
list.id = 'suggest';
$( el ).append( list );
}
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<label class="suggest">Vá digitando: <input type="text" name="suggest" /></label>

<label>ID: <input type="text" name="id" /></label>
<label>Nome: <input type="text" name="nome" /></label>
</fieldset>
</form>
</body>
</html>

complete.asp

<%
Response.Charset="ISO-8859-1"
palavra = request.querystring("palavra")
if not palavra ="" then
response.write suggest(palavra)
end if

function suggest(str)

sql = "select * from consulta"

if not str = "" then
sql = sql & " where nome like '"&replace(str," ","%")&"%'"
end if
set conn = server.createobject("adodb.connection")
conn.open "String de conexão"
set rs = server.createobject("adodb.recordset")
rs.open sql,conn,3,3
suggest = ""
if rs.eof then
suggest = suggest & "Nenhum cadastro encontrado."
else
do until rs.eof
suggest = suggest & "<li><a href=""?id="&rs("id")&""">"&rs("nome")&"</a></li>"
rs.movenext
loop
end if
rs.close
conn.close

end function
%>

Marcelo Pescador· 14 de ago.

Bom dia,

Vou testar, mas acho que vai rolar.

Obrigado.

xanburzum· 14 de ago.

beleza... só seguir ele, que dará tudo certinho