Auto complete em varios campos do form

[julio reis]

Editado Janeiro 12, 2010 por julio reis

[Kifo]

Olá, amigo.

tenho uma solução simples porém uso ASP, mas se você entender o conceito já ajuda.

O idéia do código principal foi retirado do site: http://codigofonte.uol.com.br/codigo/js-dh...-com-javascript

---------------------------------------------------------

inicio arquivo autobusca.asp

---------------------------------------------------------

<%

Dim lojaDB

set lojaDB = server.createobject ("adodb.connection")

lojaDB.open " DRIVER={MySQL ODBC 5.1 Driver};database=database;server=server;uid=user;password=pass;option=3;"

produtos = ""

i = 1

'esta consulta verifica o numero de linhas para inserção da vírgula na Array

Set RSLINHAS = LojaDB.Execute("SELECT COUNT(DISTINCT nome) AS numlinhas FROM produtos")

numlinhas = CInt(RSLINHAS("numlinhas"))

Set RSLINHAS = Nothing

'esta consulta verifica os dados repetidos e monta apenas os nomes comuns (filtra os nomes repetidos)

Set COMPRODUTO = LojaDB.Execute("SELECT DISTINCT nome FROM produtos")

While NOT COMPRODUTO.EOF

'aqui é montada a Array, no caso produtos

produtos = produtos & "'" & COMPRODUTO("nome") & "'"

'aqui insere a vírgula para que a Araay tenho o formato correto " produtos="var01","var02","var03,..."varN"

If i < numlinhas Then

produtos = produtos & ","

End If

COMPRODUTO.MoveNext

i = i + 1

Wend

Set COMPRODUTO = Nothing

'a mesma descrição de cima, porém para clientes

clientes = ""

i = 1

Set RSLINHAS = LojaDB.Execute("SELECT COUNT(DISTINCT nome) AS numlinhas FROM clientes")

numlinhas = CInt(RSLINHAS("numlinhas"))

Set RSLINHAS = Nothing

Set COMCLIENTE = LojaDB.Execute("SELECT DISTINCT nome FROM clientes")

While NOT COMCLIENTE.EOF

clientes = clientes & "'" & COMCLIENTE("nome") & "'"

If i < numlinhas Then

clientes = clientes & ","

End If

COMCLIENTE.MoveNext

i = i + 1

Wend

Set COMCLIENTE = Nothing

%>

<script>

//Aqui crio a Array propriamente dita, inserindo os dados da variável produtos e clientes, e quantas mais necessitar, realizando a consulta no BD e dando um nome específico(XXXXXXX).

//var XXXXXXX = new Array(<%=XXXXXXX%>);

var produtos = new Array(<%=produtos%>);

var clientes = new Array(<%=clientes%>);

//o restante do código é montagem do selectbox para apresentação dos resultados da consulta/busca de acordo com os caracteres digitados.

document.write('<style type="text/css">'+

'#listHolder{position:absolute;border:1;}'+

'.list{font-family:verdana;font-size:10;color:#000000;heigth:auto;}'+

'<\/style>')

function autocomplete(obj,nStr) {

var k = event.keyCode;

var T = findPosY(obj); //top

var L = findPosX(obj); //left

var list = document.getElementById('listHolder');

if(!list) {

var list = document.createElement('DIV');

list.id = 'listHolder';

document.body.appendChild(list);

}

list.style.top=(T+obj.offsetHeight);

list.style.left=L;

list.style.display='none';

var txt=obj.value;

if (txt) {

var str='<select class="list"'+

'onclick="setOption(\''+obj.id+'\',this.options[this.selectedIndex].value)"'+

'onkeyup="if(event.keyCode==13){setOption(\''+obj.id+'\','+

'this.options[this.selectedIndex].value)};if(event.keyCode==27){'+

'document.getElementById(\'listHolder\').style.display=\'none\';'+

'document.getElementById(\''+obj.id+'\').focus()};" id="selector" size="6">'

var match=false

for(a=0;a<nStr.length;a++){

if(txt.toLowerCase()==nStr[a].toLowerCase().substring(0,txt.length)){

match=true

str+=('<option value="'+nStr[a].replace(/\'/gi,'’')+'">'+nStr[a]+'</option>')

}

}

str+='</select>'

if(match){

list.innerHTML=str

list.style.display='block'

var sel=document.getElementById('selector')

if(k=='40') {

sel.focus()

}

if(k=='13'){

document.getElementById('listHolder').style.display='none'

}

}

}

}

function setOption(obj,val){

var obj=document.getElementById(obj)

obj.value=val;

obj.focus()

document.getElementById('listHolder').style.display='none'

}

function findPosX(obj){

var curleft=0;

if(obj.offsetParent) {

while(obj.offsetParent){

curleft+=obj.offsetLeft

obj=obj.offsetParent;

}

} else if(obj.x)

curleft+=obj.x;

return curleft;

}

function findPosY(obj){

var curtop=0;

if(obj.offsetParent){

while(obj.offsetParent){

curtop+=obj.offsetTop

obj=obj.offsetParent;

}

} else if(obj.y)

curtop+=obj.y;

return curtop;

}

</script>

<%

lojaDB.Close

Set lojaDB = Nothing

%>

---------------------------------------------------------

fim arquivo autobusca.asp

---------------------------------------------------------

---------------------------------------------------------

inicio arquivo menu.asp

---------------------------------------------------------

<!--#include file="autobusca.asp" -->

' aqui você vai indicar qual Array quer consultar através da indicação> onkeyup="autocomplete(this,XXXXXXX);" onde XXXX, seria o nome da Array

Busca Produto<br />

<input name="campo" type="text" id="campo" size="16" onkeyup="autocomplete(this,produtos);"/>

Busca Cliente<br />

<input name="campo" type="text" id="campo" size="16" onkeyup="autocomplete(this,clientes);"/>

---------------------------------------------------------

fim arquivo menu.asp

---------------------------------------------------------

Bastante simples, e sem ajax, consulta em tempo real, porém com Array montada logo no carregamento da página.

Existem outros métodos também incluindo ajax, no meu caso utilizei este mesmo, pois meu BD é razoavelmente pequeno, então valeu a pena.

Para bancos maiores utilize realmente AJAX. Mas tente aproveitar a idéia.

"Copiar não é difícil, o difícil é adaptar, desde que se entenda o conceito!!!"

"O homem criativo não é só o que inventa, é também o que copia, mas tem capacidade suficiente para aperfeiçoar e retribuir!!!"

Att

Paulinho.

Editado Janeiro 31, 2010 por Kifo