Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marcelo Pescador

Consulta de Seleção - Filtro

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.