Autocomplete com php+mysql+jquery

[diegoaugusto 3]

Pessoal peguei um autocomplete e consegui colocar ele para funcionar perfeitamente.

 

Agora me surgiu a necessidade de incluir em uma tela de cadastro meu ontem adiciono vários campos ao formulário usando o seguinte código:

 

var qtdeCampos = 0;

function addCampos() {
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");
//Definindo atributos ao objFilho:
objFilho.setAttribute("id","filho"+qtdeCampos);

//Inserindo o elemento no pai:
objPai.appendChild(objFilho);
//Escrevendo algo no filho recém-criado:
document.getElementById("filho"+qtdeCampos).innerHTML = "<table width='100%' border='0'><tr><td width='15%' class='style12'><input type='text' name='quantidade[]' size='6' class='form-control' id='exampleInput' placeholder='Digite a Quantidade'></td><td width='40%' class='style12'><input type='text' name='descricao[]' size='6' class='form-control' id='skills' placeholder='Digite a Descrição'></td><td width='23%' class='style12'><input type='text' name='valor[]' size='6' onkeypress='mascara(this,mvalor)' class='form-control' id='exampleInput' placeholder='Digite o Valor'></td><td width='22%' class='style12'><input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar' class='btn btn-inline'></td></tr></table>";
qtdeCampos++;
}

function removerCampo(id) {
var objPai = document.getElementById("campoPai");
var objFilho = document.getElementById("filho"+id);

//Removendo o DIV com id específico do nó-pai:
var removido = objPai.removeChild(objFilho);
}

 

ai coloquei o autocomplete e não funciona, ele aparentemente não faz a busca:

 

$(function() {
    $( "#skills" ).autocomplete({
        source: 'busca.php'
    });
});

se eu simplesmente criar apenas um campo fixo sem a inclusão de vários campos funciona, agora podendo incluir vários campos não vai.

 

o que devo fazer para funcionar?

[Guilherme Luiz 41]

Você deve mencionar os campos com nomes diferentes e fazer com que o jquery leia cada um deles.
O mais facil... utilize nomes diferentes em cada campo e crie um código para cada campo.

[AnthraxisBR 56]

Você ta duplicando id's, para pegar o campo pela id ela precisa ser única, muda o html onde está:

 

Citar

id='skills'

 

Coloca o 'skills' como um className,

Citar

class='skills'

 

E onde o autocomplete é adicionado, também precisa chamar pelo className:

 

$(function() {
  //Só mudar de '#' para '.'
    $( ".skills" ).autocomplete({
        source: 'busca.php'
    });
});

 

Acredito que seja isso.

[diegoaugusto 3]

Fiz como sugeriu mais não funcionou:

 

document.getElementById("filho"+qtdeCampos).innerHTML = "<table width='100%' border='0'><tr><td width='15%' class='style12'><input type='text' name='quantidade[]' size='6' class='form-control' id='exampleInput' placeholder='Digite a Quantidade'></td><td width='40%' class='style12'><input type='text' name='descricao[]' size='6' class='skills' placeholder='Digite a Descrição'></td><td width='23%' class='style12'><input type='text' name='valor[]' size='6' onkeypress='mascara(this,mvalor)' class='form-control' id='exampleInput' placeholder='Digite o Valor'></td><td width='22%' class='style12'><input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar' class='btn btn-inline'></td></tr></table>";
qtdeCampos++;
}

estou precisando muito mais não vai de jeito maneira:

 

$(function() {
    $( ".skills" ).autocomplete({
        source: 'busca.php'
    });
});

 

[diegoaugusto 3]

Consegui aqui, coloquei o codigo:

 

$(function() {
    $( ".skills" ).autocomplete({
        source: 'busca.php'
    });
});

aqui:

 

qtdeCampos++;
$( ".skills" ).autocomplete({
source: 'busca.php'
});

 

[AnthraxisBR 56]

1 hora atrás, diegoaugusto disse:

qtdeCampos++; $( ".skills" ).autocomplete({ source: 'busca.php' });

 

Boa, só pra você entender o pq que assim funcionou, o '$' equivale a $(document) (alguém me corrija se não exatamente isso), ou seja, executar quando os elementos estiverem prontos (elementos DOM).

 

DOM

 

Sempre que precisar executar um evento jQuery em um elemento que foi incluído depois de a página ja ter sido carregada, como o seu caso, em que você aperta o botao e inclui um elemento novo, ele só vai disparar se for para ser disparado em

 

Citar

$(document).on('evento','#alvo',function())}

 

 

[Alaerte Gabriel 662]

Seu problema não é com PHP, favor postar na área correta da próxima vez. Movendo para JavaScript.