Autoocmpletar form

[Carcleo 4]

Pessoal. Boa noite!

 

Preciso de uma ideia de como fazer isso:

 

Tenho um formulário de cadastro de clientes.

 

nome, documento, endereço........

 

Bom, estou querendo fazer com que, à medida que o usuário estiver entrando, letra a letra do nome de um novo cliente, seja feita uma busca no banco de dados para saber se há uma correspondência do que já foi digitado no campo nome do formulário com alguma inicial de algum nome já cadastrado no banco de dados.

 

Se houver, que seja pego todos os campos daquele registro e povoar os outros campos do formulário.

 

Alguma orientação?

 

No aguardo!

 

Carlos Rocha

[berkowitz 2]

Cara, uma forma simples e bacana de fazer isso é utilizando jQuery. Ele tem um recurso chamado autocomplete! É só você passar pra ele as informações possíveis que tem no banco de dados e ele já vai mostrando enquanto o usuário digita, e você pode programar o que quer que aconteça quando o usuário selecionar um dos itens apresentados. Como por exemplo preencher todos os demais campos do teu formulário.

 

Da uma olhada nesse exemplo bacana: jQuery UI AutoComplete

 

Abs.

[William Bruno 1501]

exemplo em jQuery:

http://wbruno.com.br/2010/01/08/suggest-ajax-jquery-phpmysql/

[Carcleo 4]

Sim.

 

 

 

Talvez eu não tenha me expressado bem.

 

 

 

Consegui fazer o seguinte código JavaScript:

 

function autocompletar(n,ac_array)
{
for (i=0;i<ac_array.length;i++)
{
 if (n.value = ac_array[i])
 {
  n.value=ac_array[i];
 }
 else
 {
  n.value=ac_array[i];
 }
}
}

 

A variável 'n', carrega o campo em si. (this na chamada à função);

 

A variável ac_array, carrega uma consulta ao banco de dados com os nomes dos clientes que lá tem. (É um vetor php passado para um vetor JavaScript.)

 

 <label id="label_nome_cad_clientes" for="nome_cad_clientes">Nome :</label>
 <input type="text" name="nome_cad_clientes" id="nome_cad_clientes" value="" size=60 maxlength=60  backspace="false" onkeyup="autocompletar(this,new Array(<?php echo $nomes_js; ?>))" /><br />

 

 

 

Bom, essa função esta indo razoavelmente bem.

 

 

 

Quando aperto por exemplo a letra C, ele completa com o Nome Carlos Rocha. Mas, se eu não quiser Carlos Rocha, quiser por exemplo, Cleonice, eu não consigo pois ele já completa com Carlos Rocha de novo.

 

 

O que tenho que fazer para conseguir esse efeito?

[Carcleo 4]

Bom, consegui esse código que funciona com duas restrições:

 

 

A) Se o nome for Carlos e não carlos, caso a primeira letra for c minúsculo, o código não acha o nome no array.

 

B)/> Tenho outros campos no forumulário tipo:documento, endereço..... que gostaria de autopreencher também com os dados vindos do banco mas com esse código não é possível. Ele só autopreenche o próprio campo.

 

//fruits = new Array('cleber','mamao','melancia','mercadoria','marmelada');
//names = new Array('tom','dick','harry','john','petter','foo','bar');
function autocompletar(n,ac_array){
if (n.value == "") return 0;
if (event.keyCode == 8 && n.backspace){
n.value = n.value.substr(0,n.value.length-1);
n.backspace = false;
}

var r = n.createTextRange();
tmp= n.value;
if (tmp == "")return 0;
for (z=0;z<ac_array.length;z++){
tmp2 = ac_array[z];
count = 0;
for (i = 0;i<tmp.length;i++){
if (tmp2.charAt(i) == tmp.charAt(i)){
count++
}
}
if (count == tmp.length){
diff = tmp2.length - tmp.length;
if (diff <= 0) break;
kap = "";
for (i=0;i<tmp2.length;i++){
if (i >= tmp.length) kap += tmp2.charAt(i);
}
n.backspace = true;
r.text += kap;
r.findText(kap,diff*-2);
r.select();
return 0;
}
}
n.backspace = false;
return 0;
}

 

Alguma solução?

[Carcleo 4]

Estou quase lá:

 

Estou precisando tirar duas duvidas agora:

 

a)

 

Tenho o código abaixo:

 

...
  document.getElementById("complemento_"+form_get+"_clientes").value=complemento clientes;
  document.getElementById("bairro_"+form_get+"_clientes").value=bairro_clientes;
  document.getElementById("cidade_"+form_get+"_clientes").option[0].value=cidade_clientes;
  document.getElementById("cidade_"+form_get+"_clientes").option[0].text=cidade_nome;
  document.getElementById("estado_"+form_get+"_clientes").option[0].value=estado_clientes;
  document.getElementById("estado_"+form_get+"_clientes").option[0].text=estado clientes;

...

 

Os campos texto, Não select recebem os valores certinho.

 

Mas, os campos select option, cidade e estado, apenas o campo cidade recebe os valores value e text em seus options.

 

Já testei e o valor do estado clientes esta chegando.

 

O que vem para baixo de estado.text deixa de receber os valores. Mas quando retiro cidade e estado o resto da certo.

 

 <label id="label_cidade_cad_clientes" for="cidade_cad_clientes">Cidade :</label>
 <select name="cidade_cad_clientes"  id="cidade_cad_clientes" size="1" style="width:220px">
       <option id="opcoescidade" value="#">Primeiro selecione o estado!</option>
 </select><br />

 

Outra dificuldade é o:

 

2)

 

tenha código abaixo:

 

// JavaScript Document
function mascara(e,src,mask)
{
if(window.event) { _TXT = e.keyCode; }
else if(e.which) { _TXT = e.which; }

if(_TXT > 47 && _TXT < 58)
{
   var i = src.value.length; var saida = mask.substring(0,1);
   var texto = mask.substring(i);

   if (texto.substring(0,1) != saida)
   { src.value += texto.substring(0,1); }

   return true;
 }
 else
 {
 if (_TXT != 8) { return false; }
    else { return true; }
 }
}

 

Essa função mascara os campos.

 

Acontece que chamo ela a partir de um evento. onkeypress por exemplo. Mas agora, estou chamando ela no momento em que populo o formulário na função anterior.

 

 

Porem, nesse lugar, não há eventos? O que posso passar como parâmetro em lugar de 'e' da função mascara(e,src,mask) para funcionar?