Autocomplete simples

Ronaldo Bueno · Agosto 29, 2010

Pessoal, esse tópico é baseado no original:

O código esta exatamente como o de lá.

página default.asp

<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-1.4.2.min.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: "function-suggest.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 cod = href.split('=');
			
			$("input[name='id']").val( cod[1] );
			$("input[name='nome']").val( $(this).text() );
			$("input[name='login']").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>
			<label>Login: <input type="text" name="login" /></label>
		</fieldset>
	</form>
</body>
</html>

página function-suggest.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 alunos"

if not str = "" then
	sql = sql & " where nome like '"&replace(str," ","%")&"%' and login like '"&replace(str," ","%")&"%'"
end if

set conn = server.createobject("adodb.connection")
conn.open "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.Mappath("base.mdb")
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=""?cod="&rs("cod")&""">"&rs("nome")&"</a></li>"
	rs.movenext
	loop
end if
rs.close
conn.close
end function
%>

e simplesmente ele mostra o nome no lugar da text login. Alguém poderia me dar uma luz ? Obrigado

William Bruno · Agosto 30, 2010

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

você só precisa incrementar a querystring de retorno.

?cod=15&login=tal

entendeu ?

ai você faz um parse nisso, e ai sim, joga na input de login.

Ronaldo Bueno · Agosto 31, 2010

William,

Entendi, mas a única linha que tenho de retorno é suggest = suggest & "<li><a href=""?cod="&rs("cod")&""">"&rs("nome")&"</a></li>" e pelo que entendi essa linha é o que vai ser mostrado na div de opções abaixo do text.

Tentei incluir o login nessa linha, mas também não deu.

Onde seria essa linha de query que retorna os valores ?

William Bruno · Agosto 31, 2010

exatamente ai..

suggest = suggest & "<li><a href=""?cod="&rs("cod")&""">"&rs("nome")&"</a></li>"

não sei como ficaria a sintaxe em asp... mas em php, seria algo como:

$suggest .= '<li><a href="?cod='.$rs['cod'].'&login='.$rs['login'].'">'.$rs['nome'].'</a></li>';

Ronaldo Bueno · Agosto 31, 2010

acho que coloquei do jeito certo, mas agora não aparece nada rsrsrssrss

suggest = suggest & "<li><a href=""?cod="&rs("cod")&"&login="&rs("login")""">"&rs("nome")&"</a></li>"

William Bruno · Agosto 31, 2010

então tem algo errado no asp :P

por um acaso, você não se esqueceu de um & ali não?

suggest = suggest & "<li><a href=""?cod="&rs("cod")&"&login="&rs("login")&""">"&rs("nome")&"</a></li>"

depois que você conseguir fazer essa querystring de retorno, ai você só vai precisar fazer um parse dela.. para pegar os valores corretos e conseguir jogar nos inputs que você quer

já perguntaram isso uma vez

http://forum.imasters.com.br/index.php?/topic/389364-autocomplete-nao-busca-todos-os-dados-do-banco/page__view__findpost__p__1516094

^_^

Ronaldo Bueno · Agosto 31, 2010

estou quase lá,

segui as dicas que deu e agora esta assim:

Acrescentei

var login = href.split('&');

$("input[name='login']").val( login );

mas como tem dois '&' no link esta mostrando isso no text login:

?cod=225

ou seja o código do aluno

Ronaldo Bueno · Agosto 31, 2010

William, olhando o link que passou e mais a documentação original cheguei a seguinte conclusão. poderia ver se estou certo?

Primeiro pega o link que vem do ASP

var href = $(this).attr('href');

Depois guarda ela nessa variavel

var qs = new Querystring( href );

essa linha seria para dar um alerta ou mostar na página?

ou seja pega o que tem no valor de cod no link certo?

alert( qs.get('cod') );

Tentei de várias fomas inclusive assim:


'pega o link			
var href = $(this).attr('href');
'conta a partir do ?        
var href1 = href.split('?');
'guarda nessa variavel
var qs = new Querystring( href1 );

'como não sei se isso é alerta, tentei apenas para ver se aparecia
alert( qs.get('cod') );
alert( qs.get('login') );        
			
'aqui realmente falo que o text será igual ao que peguei
$("input[name='id']").val( qs.get('cod') );
$("input[name='nome']").val( $(this).text() );
$("input[name='login']").val( qs.get('login') );

Por favor, de uma forcinha ai. valeu

William Bruno · Agosto 31, 2010

sim! exatamente isso ai.

apareceu os alerts pra você? com o valor certo ?

posta o script completo como ficou pra eu ver se consigo reproduzir 'o erro' aqui.

Ronaldo Bueno · Agosto 31, 2010

Não apareceu o alerta, esta aparecendo a Mensagem: 'Querystring' não está definido (na barra de status)

Mas quando eu procuro o nome e paro em cima dele, vejo o link na barra de status, então ele esta indo certo.

<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: "function-suggest.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 qs = new Querystring( href );

			alert( qs.get('cod') );
			alert( qs.get('login') );        
			
			$("input[name='id']").val( qs.get('cod') );
			$("input[name='nome']").val( $(this).text() );
			$("input[name='login']").val( qs.get('login') );

			
			$("#suggest").remove();
		});
		$("#suggest").mouseout(function(){
			$("#suggest").remove();
		});
	});
	function createList( el )
	{
		$("#suggest").remove();
		
		var list = document.createElement('ul');
		list.id = 'suggest';
		$( el ).append( list );
	}
</script>

William Bruno · Agosto 31, 2010

Querystring não é um objeto nativo... então você precisa colocar ai no meio, todo o script lá dele...

<script type="text/javascript"> 
/* Client-side access to querystring name=value pairs
        Version 1.3
        28 May 2008
        
        License (Simplified BSD):
        http://adamv.com/dev/javascript/qslicense.txt
*/
function Querystring(qs) { // optionally pass a querystring to parse
        this.params = {};
        
        if (qs == null) qs = location.search.substring(1, location.search.length);
        if (qs.length == 0) return;

// Turn <plus> back to <space>
// See: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.1
        qs = qs.replace(/\+/g, ' ');
        var args = qs.split('&'); // parse out name/value pairs separated via &
        
// split out each name=value pair
        for (var i = 0; i < args.length; i++) {
                var pair = args[i].split('=');
                var name = decodeURIComponent(pair[0]);
                
                var value = (pair.length==2)
                        ? decodeURIComponent(pair[1])
                        : name;
                
                this.params[name] = value;
        }
}

Querystring.prototype.get = function(key, default_) {
        var value = this.params[key];
        return (value != null) ? value : default_;
}

Querystring.prototype.contains = function(key) {
        var value = this.params[key];
        return (value != null);
}

//daqui pra baixo vem o teu código
        $(document).ready(function(){
                $("input[name='suggest']").keyup(function(){
//.. continua

</script>

entendeu? :P

use o FireFox, o debug do IE é muito precário...

Ctrl + Shif + J (no FF)

Ronaldo Bueno · Agosto 31, 2010

O problema esta na segunda variavel na primeira ele mostra o alerta certo. na segunda nem mostra dá erro.

			var href = $(this).attr('href');        

			alert( href );
			
			var qs = new Querystring( href );
			
			alert( qs );

entendi, baixei o arquivo e copiei o código abaixo do outro, mas esta dando erro undefined nos dois alertas de baixo.

estou debugando para ficar mais fácil rssrrsr esta assim:

			var href = $(this).attr('href');        

			alert( href );
			
			
			var qs = new Querystring( 'href' );
			
			alert( qs.get('cod') );
			alert( qs.get('login') );

William, agora esta quase rsrsrss.

esta mostrando até outros campos que acrescentei. mas o codigo continua como indefinido. já troquei os nomes dos campos, das strings e nada, será que tem alguma dica para eu verificar ?

o código esta assim agora:

<script type="text/javascript"> 
function Querystring(qs) { // optionally pass a querystring to parse
	this.params = {};
	
	if (qs == null) qs = location.search.substring(1, location.search.length);
	if (qs.length == 0) return;

// Turn <plus> back to <space>
// See: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.1
	qs = qs.replace(/\+/g, ' ');
	var args = qs.split('&'); // parse out name/value pairs separated via &
	
// split out each name=value pair
	for (var i = 0; i < args.length; i++) {
		var pair = args[i].split('=');
		var name = decodeURIComponent(pair[0]);
		
		var value = (pair.length==2)
			? decodeURIComponent(pair[1])
			: name;
		
		this.params[name] = value;
	}
}

Querystring.prototype.get = function(key, default_) {
	var value = this.params[key];
	return (value != null) ? value : default_;
}

Querystring.prototype.contains = function(key) {
	var value = this.params[key];
	return (value != null);
}
</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: "function-suggest.asp",
				data: "palavra="+$(this).val(), 
				success: function( data ){
					$("#suggest").html( data );
				}
			});
		});
		
		$("#suggest a").live('click', function( e ){
			e.preventDefault();
			
			var href = $(this).attr('href');        
			//isso é do original
			var cod = href.split('=');

			alert( href );
			
			var qs = new Querystring( href );
			
			alert( qs.get('cod') );
			alert( qs.get('login') );        
			
			//isso é do original
			$("input[name='id']").val( cod[1] );

			$("input[name='id']").val( qs.get('cod') );
			$("input[name='nome']").val( $(this).text() );
			$("input[name='suggest']").val( $(this).text() );
			$("input[name='login']").val( qs.get('login') );
			$("input[name='area']").val( qs.get('area') );

			
			$("#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" readonly /></label>
			<label>Nome: <input type="text" name="nome" readonly /></label>
			<label>Login: <input type="text" name="login" readonly /></label>
			<label>Área: <input type="text" name="area" readonly /></label>
		</fieldset>
	</form>
</body>
</html>

e o asp esta assim:

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

if not str = "" then
	sql = sql & " where nome like '"&replace(str," ","%")&"%' and login like '"&replace(str," ","%")&"%'"
end if

set conn = server.createobject("adodb.connection")
conn.open "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.Mappath("base.mdb")
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=""?cod="&rs("cod")&"&login="&rs("login")&"&area="&rs("areadocurso")&""">"&rs("nome")&"</a></li>"
	rs.movenext
	loop
end if
rs.close
conn.close
end function
%>

Muito obrigado pela ajuda

Arquivado

Autocomplete simples

Recommended Posts

Ronaldo Bueno 23

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

Ronaldo Bueno 23

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

Ronaldo Bueno 23

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

Ronaldo Bueno 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ronaldo Bueno 23

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

Ronaldo Bueno 23

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

Ronaldo Bueno 23

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