[Resolvido] Autocomplete simples

reinaldo polato · Julho 24, 2010

e ai galera beleza

como eu faço um sistema de auto complete bem simples

William Bruno · Julho 24, 2010

no meu blog tem um exemplo usando jquery:

http://www.wbruno.com.br/scripts/suggest.php

código:

http://www.wbruno.com.br/blog/?p=24

criei esse suggest para um topico aqui do forum.. então existe uma implementação 'passo a passo' dele por aqui

reinaldo polato · Julho 24, 2010

e ai wiliam bruno beleza

eu fiz um codigo igual ao seu mais ele quando eu digito o nome ele não acha

eu fiz uma pagina index.asp e outra em php e a pagina jquery.js o que eu tenho que fazer nessa pagina

valeu pela ajuda ai

abraço

William Bruno · Julho 24, 2010

depende cara.. se você fizer 'certinho' era pra funcionar.. mostre como você tentou.

existe o plugin autocomplete também... talvez seja mais facil de você usar.

você baixou o jQuery ?

http://docs.jquery.com/Downloading_jQuery

reinaldo polato · Julho 24, 2010

e ai beleza

eu fiz assim

suggest.php

<%@ Language=VBScript %>

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

<html>

<head>

<title>Suggest</title>

* {

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>

$(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.php",

data: "parte="+$(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>

<label class="suggest">Vá digitando: <input type="text" name="suggest" /></label>

</fieldset>

</form>

<p>Procure por: Reinaldo, B, J..</p>

</body>

</html>

e a function.php

<?php

header("Content-Type: text/html; charset=ISO-8859-1");

echo suggest( getGet('parte') );

function suggest( $palavra )

{

$sql = "SELECT `id`, `nome` FROM `Consulta` ";

if( !empty($palavra) )

$sql .= "WHERE `nome` LIKE '{$palavra}%'";

$mysqli = new mysqli( 'localhost','root','123','ajax' );

$query = $mysqli->query( $sql );

if( $query->num_rows>0 )

{

$li='';

while( $dados = $query->fetch_object() )

$li .= '<li><a href="?id='.$dados->id.'">'.$dados->nome.'</a></li>';

}

else

$li = 'Nenhum cadastro encontrado!';

return $li;

}

function getGet( $campo ){

return ( isset($_GET[ $campo ]) ) ? filter( $_GET[ $campo ] ) : null;

}

function filter( $var )

{

if( !get_magic_quotes_gpc() )

$str = mysql_real_escape_string( $var );

else

$str = $var;

$str = str_replace( '#', '\#', $str );

return $str;

}

e o banco de dados eu fiz assim

id

nome

ai pra salvar eu coloquei Consulta

augustoclaro · Julho 24, 2010

<%
Response.Charset="ISO-8859-1"
palavra = request.querystring("palavra")
response.write suggest(palavra)
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 "DRIVER={MySQL ODBC 5.1 Driver};SERVER=server; DATABASE=database;Uid=user;Pwd=senha"
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>"
end if
rs.close
conn.close

end function
%>

Tá aí uma versão em asp para a função do William Bruno.

Lembrando que para conseguir conectar o asp ao mysql você precisa instalar este programa:

http://dev.mysql.com/downloads/connector/odbc/5.1.html

Espero ter ajudado =D

reinaldo polato · Julho 24, 2010

e ai augusto beleza

essa conexao com o banco de dados conn.open "DRIVER={MySQL ODBC 5.1 Driver};SERVER=server; DATABASE=database;Uid=user;Pwd=senha"

temque ter instalado o banco de dados my sql ou pode ser com o banco de dados access

esse script está dando erro no end id

augustoclaro · Julho 24, 2010

sim, para usar com access:

conn.open "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=caminho"

qual o erro?

reinaldo polato · Julho 24, 2010

e ai beleza

eu copiei esse codigo

acontece o seguinte

esse codigo inteiro ele não está funcionando ele está dando erro no codigo inteiro

abraço

augustoclaro · Julho 24, 2010

Me desculpe, eu esqueci deduas linhas no código, segue o código testado e funcionando:

<%
Response.Charset="ISO-8859-1"
palavra = request.querystring("palavra")
response.write suggest(palavra)
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 "DRIVER={MySQL ODBC 5.1 Driver};SERVER=server; DATABASE=database;Uid=user;Pwd=senha"
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
%>

augustoclaro · Julho 24, 2010

você também pode optar por substituir:

response.write suggest(palavra)

por:

if not palavra ="" then
response.write suggest(palavra)
end if

para evitar que todos os registros no banco de dados apareçam caso o usuário não digite nada.

reinaldo polato · Julho 24, 2010

e ai beleza

é o seguinte esse codigo

<%

Response.Charset="ISO-8859-1"

palavra = request.querystring("palavra")

response.write suggest(palavra)

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 "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=c:\codigo\db_autocomplete.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=""?id="&rs("id")&""">"&rs("nome")&"</a></li>"

rs.movenext

loop

end if

rs.close

conn.close

end function

%>

ele está funcionando

e eu fiz essa outra pagina

suggest.asp

<%@ Language=VBScript %>

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

<html>

<head>

<title>Suggest</title>

* {

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>

$(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: "index.asp",

data: "parte="+$(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>

<label class="suggest">Vá digitando: <input type="text" name="suggest" /></label>

</fieldset>

</form>

<p>Procure por: Reinaldo, B, J..</p>

</body>

</html>

eu quero fazer um auto complete mais ele não está funcionando

augustoclaro · Julho 24, 2010

Mude isso:

data: "parte="+$(this).val(),

para isso:

url: "index.asp",

data: "palavra="+$(this).val(),

reinaldo polato · Julho 25, 2010

e ai galera valeu pela ajuda de vocês deu certo coloca como resolvido

valeu ai

reinaldo polato · Julho 25, 2010

e ai galera beleza é o seguinte eu usei esse codigo que funcionou mais eu coloquei mais um nome o Advogado ai acontece o seguinte

o codigo é

index.asp

<%@ Language=VBScript %>

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

<html>

<head>

<title>Suggest</title>

* {

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>

$(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: "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 id = href.split('=');

$("input[name=Advogado]").val( $ (this );

$("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>

<label class="suggest">Vá digitando: <input type="text" name="suggest" /></label>

<label>Advogado: <input type="text" name="Advogado"></label>

</fieldset>

</form>

<p>Procure por: A, B, J..</p>

</body>

</html>

e a outra pagina é a suggest.asp

<%

Response.Charset="ISO-8859-1"

palavra = request.querystring("palavra")

response.write suggest(palavra)

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 "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=c:\codigo\db_autocomplete.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=""?id="&rs("id")&""">"&rs("nome")&"</a></li>"

rs.movenext

loop

end if

rs.close

conn.close

end function

%>

ele não está dando erro mais quando eu vou Digitar uma palavra aonde tem Va Digitando ele não aparece nada fica tudo bem branco

augustoclaro · Julho 25, 2010

não entendi, o que você escreveu e o que deveria aparecer?

reinaldo polato · Julho 25, 2010

e ai augusto beleza

eu quero que aparece assim

aonde tem va procurando temque aparecer o que foi cadastrado na tabela eu cadastrei no banco de dados

o Advogado e coloquei o nome Reinaldo

ai eu coloquei a id 1

e eu coloquei o nome lindo

ai quando eu digito o primeiro nome do reinaldo ele não funciona

augustoclaro · Julho 25, 2010

Não entendi muito bem, mas tenta mudar essa linha:

sql = sql & " where nome like '"&replace(str," ","%")&"%'"

por:

sql = sql & " where nome like '%"&replace(str," ","%")&"%'"

e vê se ajuda.

reinaldo polato · Julho 25, 2010

e ai augusto beleza

é o seguinte o autocomplete ele não está funcionando

esse é os codigos

index.asp

<%@ Language=VBScript %>

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

<html>

<head>

<title>Suggest</title>

* {

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>

$(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: "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 id = href.split('=');

$("input[name=Advogado]").val( $ (this ).text() ) ;

$("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>

<label class="suggest">Vá digitando: <input type="text" name="suggest" /></label>

<label>Advogado: <input type="text" name="Advogado"/></label>

</fieldset>

</form>

<p>Procure por: A, B, J..</p>

</body>

</html>

suggest.asp

<%

Response.Charset="ISO-8859-1"

palavra = request.querystring("palavra")

response.write suggest(palavra)

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 "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=c:\reinaldo1\db_complete.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=""?id="&rs("id")&""">"&rs("nome")&"</a></li>"

rs.movenext

loop

end if

rs.close

conn.close

end function

%>

nessa segunda pagina a linha 20

que é essa suggest = suggest & "<li><a href=""?id="&rs("id")&""">"&rs("nome")&"</a></li>"

so tinha o ID e o Nome ai eu coloquei mais um campo o Advogado ai como eu faço pra mudar essa linha 20 pra colocar o Advogado a pagina index.asp está certa

augustoclaro · Julho 25, 2010

como assim para por o advogado?

Arquivado

[Resolvido] Autocomplete simples

Recommended Posts

reinaldo polato 1

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

reinaldo polato 1

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

reinaldo polato 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

reinaldo polato 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

reinaldo polato 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

reinaldo polato 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

reinaldo polato 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

reinaldo polato 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

reinaldo polato 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

reinaldo polato 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2