Carlos Rocha Posted December 18, 2012 Report Share Posted December 18, 2012 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. Isso, letra a letra sem precisar submeter o formulário. Alguma orientação? No aguardo! Carlos Rocha Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 18, 2012 Report Share Posted December 18, 2012 AJAX+JSON tens cuidado com o que pretendes, olha que para isso acontecer, necessitas de fazer um pedido ao servidor a cada alteração do conteúdo da caixa !!! IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Rechousa Posted December 19, 2012 Report Share Posted December 19, 2012 Olá, Existe vários plugin's jQuery que poderão ajudar-te. Por exemplo, o jQuery UI tem um. Pedro Martins Sharing is Knowledge! http://www.linkedin.com/in/rechousa Link to comment Share on other sites More sharing options...
Carlos Rocha Posted December 19, 2012 Author Report Share Posted December 19, 2012 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? Link to comment Share on other sites More sharing options...
Carlos Rocha Posted December 20, 2012 Author Report Share Posted December 20, 2012 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? Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 20, 2012 Report Share Posted December 20, 2012 http://jqueryui.com/autocomplete/ IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Carlos Rocha Posted December 20, 2012 Author Report Share Posted December 20, 2012 (edited) 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) Tenho o 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? Edited December 20, 2012 by carcleo Link to comment Share on other sites More sharing options...
lsoares Posted December 21, 2012 Report Share Posted December 21, 2012 (edited) A não ser que tenhas razões muito fortes para não usar uma biblioteca (e.g. quereres causar o mínimo de carga) então acho que devias seguir a recomendação de usar uma biblioteca. O JQuery UI Autocomplete que já foi referido acima mais que uma vez é uma hipótese. exemplo: http://jsbin.com/oniji4/1/edit Se não quiseres mesmo usar uma biblioteca... ainda se coloca a questão: porquê reinventar a roda? Podes usar um script qualquer: http://www.codeproject.com/Articles/8020/Auto-complete-Control Edited December 21, 2012 by lsoares --- Luís Soares jQuery - A Sua Biblioteca Javascript Link to comment Share on other sites More sharing options...
Carlos Rocha Posted December 21, 2012 Author Report Share Posted December 21, 2012 Consegui fazer usando apenas Ajax e xml. Aquele esquema do combo estado / cidades. Lembra? Esta tudo funcionando bem. Porem não é tão eficiente quanto Jquery que mostra lista a partir da input text. O que eu fiz foi mostrar nos campos do form a primeira combinação. Mas agora preciso de, se o usuário pressionar backspace, limpar os campos do form. O que estou fazendo: Tenho a função abaixo: function LimpaCampos(form_get) { alert(event.keyCode); if (event.keyCode==8) { document.getElementById("dcto_"+form_get+"_clientes").value=""; document.getElementById("nome_"+form_get+"_clientes").value=""; document.getElementById("endereco_"+form_get+"_clientes").value=""; document.getElementById("numero_"+form_get+"_clientes").value=""; document.getElementById("complemento_"+form_get+"_clientes").value=""; document.getElementById("bairro_"+form_get+"_clientes").value=""; document.getElementById("cidade_"+form_get+"_clientes").options[0].value=""; document.getElementById("cidade_"+form_get+"_clientes").options[0].text=""; document.getElementById("estado_"+form_get+"_clientes").options[0].value=""; document.getElementById("estado_"+form_get+"_clientes").options[0].text=""; document.getElementById("cep_"+form_get+"_clientes").value=""; document.getElementById("email_"+form_get+"_clientes").value=""; document.getElementById("tel_"+form_get+"_clientes").value=""; document.getElementById("cel_"+form_get+"_clientes").value=""; } } A ideia aqui é, se o usuário pressionar bakspace ou delete, limpar os campos do formulário. Mas acontece que, para qualquer tecla que pressiono, o alert no início da função me diz qual tecla é. Mas a tecla backspace não diz. Link to comment Share on other sites More sharing options...
lsoares Posted December 21, 2012 Report Share Posted December 21, 2012 (edited) http://stackoverflow.com/questions/9906885/detect-backspace-and-del-on-input-event Edited December 21, 2012 by lsoares --- Luís Soares jQuery - A Sua Biblioteca Javascript Link to comment Share on other sites More sharing options...
Carlos Rocha Posted December 21, 2012 Author Report Share Posted December 21, 2012 (edited) Não entendi a soluçao Edited December 21, 2012 by carcleo Link to comment Share on other sites More sharing options...
lsoares Posted December 21, 2012 Report Share Posted December 21, 2012 (edited) http://jsbin.com/idumiv/3 Edited December 21, 2012 by lsoares --- Luís Soares jQuery - A Sua Biblioteca Javascript Link to comment Share on other sites More sharing options...
Carlos Rocha Posted December 21, 2012 Author Report Share Posted December 21, 2012 Troquei o evento e funcionou. Usei no onkeyup Valeu Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now