1

colocar

<select class="form-control">
  <option value="" selected></option>
  <option><input type="text" class="form-control" placeholder="Procurar dentro do banco de dados" name="pesquisa" id="pesquisa"></option>
</select>

como coloco uma caixa de pesquisa dentro de um select e que ele fique invisivel ate eu clicar no select e ele aparecer pera poder pesquisar no banco de dados e os resultados aparecer como options no select

2
  • Não dá pra usar um input dentro de um select. Você pode exibir o input no mesmo lugar do select ao clicar, usando javascript, mas você está fazendo uma pergunta muito complexa, você quer fazer isso, ainda pesquisar no banco, preencher o select... melhor fazer uma pergunta mais específica de cada vez 6/01/2017 às 1:05
  • 2
    Vai ter que utilizar chosen ou select2. Eles vão emular visualmente um select com input dentro.
    – Bruno Wego
    6/01/2017 às 1:28

1 Resposta 1

1

Antes de tudo vou deixar bem claro que não sei se entendi bem o que você quer, mas lá vai. A explicação detalhada é meio complicada mas posso tentar ajudar. Você vai conseguir resolver isso com javascript/jQuery.

Primeiro crie o campo de texto para iniciar a pesquisa. No jQuery configure uma função que executa a pesquisa que você desejar a cada letra digitada no campo. (Nisso você vai usar Ajax). Em outras palavras: quando uma letra for digitada no campo, essa função do javascript será executada. A função em questão vai enviar o valor atual do campo para um script PHP que vai montar e executar a query no banco, retornando os valores possíveis.

Ao pegar esses valores basta listá-los logo abaixo do campo de pesquisa. Para isso você pode imprimí-los como lista não ordenada (<ul> e <li>). Para que ele fique visualmente agradável, trabalhe com o CSS. Caso queira algo um pouco mais trabalhado, ao invés de sua função do jQuery apenas retornar o dado bruto, envie esses dados para uma outra função que monta a estrutura de um select e, em seguida, imprima na tela (mas acho desnecessário - e menos interessante que a primeira opção - esse trabalho todo).

Além de mostrar os dados como lista, precisa criar uma função para identificar caso alguma dessas opções for selecionada. Quando o usuário clicar em uma delas, você pega esse valor e preencha o campo.

Para ajudar com o pontapé inicial, vou deixar alguns snippets que podem te nortear. No caso, simulamos que estamos buscando um nome.

Este é o campo a preencher <input type="text" id="field" name="fullName" placeholder="Full Name">

Em algum arquivo separado, coloque:

$('#field').change(function(){
    $.ajax({
        url : './findName.php',
        type : 'POST',
        data: 'name=' + $('#field').val(),
        dataType: 'json',
        success: function(data){
            if(data.success !== 1){
                return false;
            }
        }
    })
});

O código acima vai acionar o arquivo findName.php, que será o responsável por pegar o valor recebido e executar a query no banco. O atributo url mostra o arquivo de destino. O atributo type representa o método que você vai usar para enviar os dados. "Data" é o dado a ser enviado. "Success" indica o que vai acontecer quando a requisição acontecer com sucesso. Os resultados retornados devem ser impressos no PHP mesmo usando algo do tipo echo json_encode($nomes);

Para pegar a variável no arquivo PHP (findName.php) é fácil. Como usamos o método POST para enviar os dados:

$name = $_POST['name'];

Enfim, acho que já dá pra começar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .