[Resolvido] autocomplete em campo de texto

[Carcleo 4]

Estou usando um script para completar um input type="text".

// JavaScript Document	

//fruits = new Array('cleber','mamao','melancia','mercadoria','marmelada');
//names = new Array('tom','dick','harry','john','petter','foo','bar');

function autocomplete(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;
}

Estou chamando a função autocomplete assim:

<input type="text" id="text_bairro" value="" backspace='false' onkeyup="autocomplete(this,<?php $cidades_nomes; ?>)"  />

Esse array, se impresso com print_r(), exibe assim:

Array
(
[0] => Eugenopolis
[1] => Muriaé
[2] => São Paulo
)

Mas, o script só esta aceitando arra nesse formato:

fruits = new Array('cleber','mamao','melancia','mercadoria','marmelada');
 names = new Array('tom','dick','harry','john','petter','foo','bar');

O que fazer nesse caso?

[William Bruno 1501]

Depende.. oque você quer ?

 

você colocou o script, explicou ele, mas não disse o principal: onde você quer chegar?

[Carcleo 4]

Bom, eu tenho um array php que me entrega uma lista com os nomes das cidades que satisfazem uma query(consulta) ao mysql.

 

Eu quero fazer com que o usuario, em um campo de texto, ao iniciar a digitação do nome de uma cidade, seja feita uma busca nesse array de cidades para saber se tem algum nome de cidade lá que começe com o que o usuario começou a digitar. Se sim, complete o nome da cidade automatico.

[William Bruno 1501]

OK, então faça o php retornar o array no formato que o teu script precisa.

 

Só isso.

[Carcleo 4]

OK, então faça o php retornar o array no formato que o teu script precisa.

 

Só isso.

Tem como me dar uma dica de como chego naquele formato?

[William Bruno 1501]

uma forma "feia":

 

<?php
$arr =  Array('nome', 'sobrenome');

echo  'names = new Array('.implode( ',',$arr ).');'

 

algo assim..

[Carcleo 4]

uma forma "feia":

 

<?php
$arr =  Array('nome', 'sobrenome');

echo  'names = new Array('.implode( ',',$arr ).');'

 

algo assim..

Hum não funcionou.

[William Bruno 1501]

vai trabalhando no php até ficar certo e funcionar :lol:

 

 

oque eu fiz foi um "pseudo código" de exemplo.

[Carcleo 4]

certo, então me diz apenas como posso imprimir a array $cidades_nomes com este aspecto;

'Eugenopolis','Muriaé','São Paulo'

Em vez de este:

Array
(        
  [0] => Eugenopolis       
  [1] => Muriaé        
  [2] => São Paulo
)

?

A ideia aqui é fazer:

<input type="text" id="text_bairro" value="" backspace='false'  onkeyup="autocomplete(this,new Array(<?php echo $cidades_nomes; ?>))"  />

[Carcleo 4]

Consegue com o implode:

onkeyup="autocomplete(this,new Array(<?php echo implode(',',$cidades_nomes); ?>))"

mas acontece, as cidadesa estão sendo exibidas assim:

new Array(Eugenopolis,Muriaé,São Paulo)

E eu preciso assim:

new Array('Eugenopolis','Muriaé','São Paulo')

[Carcleo 4]

Bom, consegui com o php assim:

        <?php
     		 $cidades_nomes_js="";
	 	 foreach ($cidades_nomes as $nome)
		 {
			 if ($nome == $cidades_nomes[count($cidades_nomes)-1])
			 {
			      $cidades_nomes_js.="'".$nome."'";
			 }
			 else 
			 {
				  $cidades_nomes_js.="'".$nome."',";
			 }
		 }
        ?>

Acontece que a função autocomplete do JavaScript é case sensitive. Ou seja, se o usuario digitar mur, e no array tiver Muriaé, a busca não vai achar nada.

Como eu faço para a busca não ser case sensitive?

Segue novamente a função:

<script>
/*fruits = new Array('São Paulo','mamao','melancia','mercadoria','marmelada');
names = new Array('tom','dick','harry','john','petter','foo','bar');
*/function autocomplete(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;
}
</script>

[William Bruno 1501]

tenta assim:

 

onkeyup="autocomplete(this,new Array('<?php echo implode("','",$cidades_nomes); ?>'))"

 

 

 

para a busca não ser case-sensitive, ai você precisa converter tudo para minusculo. Faz o php devolver em minusculo, e converte para minusculo tudo oq o usuario digitar.

[Carcleo 4]

Mas hein Bruno.

 

Como o implode, ele vai gerar uma virgula incluse depois do ultimo elemento. Por isso usei o o foreach.

 

Quanto ao case sensitive, a alimentação do array vem do banco e não tem como saber quando será maiúsculo ou minúsculo.

 

E quem faz a busca é o JavaScript, não o php.

 

Diante disso, alguma saida?

[William Bruno 1501]

Sim, só aplicar oque eu disse.

 

Vou explicar de novo:

$cidades_nomes_js.="'". strtolower( $nome )."'";

ok?

 

agora não importa oq vier do banco, estamos colocando tudo em minusculo.

 

 

aqui:

function autocomplete(n,ac_array){

 

esse n é um objeto que aponta para o elemento input.

 

 

n.value.toLowerCase();

 

pronto, agora não importa oque o usuário digitar, temos tudo em minusculo também. E você não terá problemas com case sensitive, pois estamos comparando minusculo(que convertemos no php), com minusculo(q convertemos do usuário).

 

 

 

 

Captou agora ?

[Carcleo 4]

Sim entendi. Mas ai surgiram duas novas duvidas:

 

1) Tem como, ao fazer, no próprio implode, adicionar aos elementos aspas simples?

Tipo, ao invez de imprimir (Eugenópolis, Muriaé, São Paulo)

imprimir ('Eugenópolis', 'Muriaé', 'São Paulo'), ou seja, com aspas simples?

 

2) Uma vez que foi passado para minúsculo, não irá interferir na busca no mysql depois? Uma vez que, no banco, as cidades estão com iniciasis maiúsculas? Mas essa busca vai ser pela cidade, uma vez que o usuario ja digitou ela.

[William Bruno 1501]

1) Tem como, ao fazer, no próprio implode, adicionar aos elementos aspas simples?

Tipo, ao invez de imprimir (Eugenópolis, Muriaé, São Paulo)

imprimir ('Eugenópolis', 'Muriaé', 'São Paulo'), ou seja, com aspas simples?

tem sim, exatamente como te falei lá em cima, veja:

<?php

$arr = Array('a','b','c','d','e');
echo "'".implode( "','", $arr )."'";

 

 

2) Uma vez que foi passado para minúsculo, não irá interferir na busca no mysql depois?

? pq ?

 

 

não necessariamente. você não precisa exibir e nem gravar tudo em minusculo. Essa artimanha q te mostrei, é apenas para normalizar a busca, e não ter problemas com ela por causa do case-sensitive.

[Carcleo 4]

Ok.

 

Obrigado. Funcionou.

Ficou assim:

        <?php
	     $bairros_nomes= array();
     		 $bairros_nomes_js="";
	     $bairros_string ="select distinct(bairro_imovel) from imoveiscadastrovenda order by bairro_imovel";
		 try{
			   $bairros = $conexao->query($bairros_string);
			   while(list($nomes_bairros)=$bairros->fetch_row())
			   {
				  array_push($bairros_nomes, $nomes_bairros);
			   }
			}catch(Exception $e) 
			{
				echo $e->getMessage();
			}
               $bairros_nomes_js= strtolower("'".implode( "','", $bairros_nomes )."'");
        ?>

E no campo texto:

       <input type="text" id="text_bairro" value="" backspace='false' 
       onkeyup="autocomplete(this,new Array(<?php echo $bairros_nomes_js; ?>))"  /><br />

Será que ainda tem como diminuir esse código?

[William Bruno 1501]

como assim ? pq diminuir ?

 

oque te incomoda nele?

[Carcleo 4]

Tentei assim:

  $bairros = $conexao->query($bairros_string);
  $bairros_nomes_js= strtolower("'".implode( "','", $bairros->fetch_row() )."'");

Mas só veio o primeiro ítem do array $bairros->fetch_row().

 

Tem como resolver isso?

[William Bruno 1501]

apenas se o driver q você tiver usando implementar a função fetch_all()