0

estou usando o autocomplete do JQuery e esta funcionando noralmente. Mas, esta populando um type text que contém apenas um campo (o próprio txt) para preencher.

Gostaria que fosse preenchido um select ao invés do txt.

Algu´pem me ajuda?

Segue o código

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="http:////code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="style.css">


    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
    $(function() {
        var clientes = [
            "Fulano",
            "Bertanbo"
        ];
        $( "#clientes" ).autocomplete({
            source: clientes
        });
    });
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="clientes">clientes: </label>
    <input id="clientes">
</div>


</body>
</html>

Gostaria de trocar o

<input id="clientes">

Por

<select name="clienteEscolhido">
  <option value=""></option>
</select>
5
  • o jquery autocomplete ele foi feto para rodar em cima de campo texto mesmo, para você utilizar ele no combobox acho que você está procurando um multiselect com busca. Algo como esse select2.github.io/examples.html seria isso ? ou você pode estar querendo algo como isso jqueryui.com/resources/demos/autocomplete/combobox.html mais ele não é feito em cima de um combo e sim um input normal com uma lista :D
    – Brunno
    Commented 19/09/2015 às 13:33
  • Bom. É o seguinte. A combobox (select), tem 2 campos. Um com o value do option que traz o id do Cliente e um texto que traz o nome do cliente.<option value"idCliente">Nome do Cliente</option>. Esse campo será submetido em um formulário para pegar do outro lado o id do Cliente e exibir dados dele! Por isso o select precisa ser dessa forma! Commented 19/09/2015 às 14:01
  • Carlos, você pode fazer isso direto pelo autocomplete no campo type="text" mesmo usando o key e o value.. ai no select do auto complete você seta o id em um campo hidden para ser enviado no seu formulário. vou postar um exemplo na resposta :D
    – Brunno
    Commented 19/09/2015 às 14:14
  • Não entendi muito bem a sua dúvida. Você quer que ao digitar no input o mesmo vire um select?
    – Randrade
    Commented 19/09/2015 às 14:37
  • Não, quero, desejo digitar no próprio select. O Select não deixa digitar pois ao clikar no text dele abre a combobox. Certo, Mas queria poder digitar. O exemplo perfeito seria o que esta nesse link. Mas haja script JQuery viu? Não tem jeito de diminuir não? rsrs. jqueryui.com/resources/demos/autocomplete/combobox.html Commented 19/09/2015 às 14:46

1 Resposta 1

2

Segue uma solução usando um <input type="text" /> e um <input type="hidden" /> . Consiste em pegar o evento de seleção do seu auto complete e setar a descrição no text e o Id para ser enviado para seu backend no campo hidden :)

HTML:

<input type="text" id="descricao" />
<input type="hidden" name="idQueVaiParaSeuBackEnd" id="id" />

JavaScript:

var source = [{
    label: "Tom Smith",
    value: "1234"
}, {
    label: "Tommy Smith",
    value: "12321"
}];

$("#descricao").autocomplete({
    source: source,

    //quantidade de caracteres para começar a buscar
    minLength: 3,

    //evento de quando você seleciona uma opção   
    select: function (event, ui) {         

        //seto a descrição para aparecer para usuario no input text
        $("#descricao").val(ui.item.label);

        //seto o id para ir para seu backend :D
        $("#id").val(ui.item.value); 

        event.preventDefault();
    }
});

CSS:

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">

JS:

<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>

Segue o jsfiddle.

7
  • Achei esse exemplo mais interessante: jqueryui.com/resources/demos/autocomplete/combobox.html Commented 19/09/2015 às 14:32
  • Quero sim. Na verdade queria é diminuir um pouco a chamada dele. O JQuery tá enorme. De repente tem alguma coisa que não faz diferença se retirar! Commented 19/09/2015 às 14:47
  • esse aqui também não esta ruim. Mas não achei as inserções de jquery usadas jsfiddle.net/buh159/LCv8L/633 Commented 19/09/2015 às 14:49
  • são as que rodam nesse link? jsfiddle.net/buh159/LCv8L/633. Aqui não funcionou não! Adiciona as chamadas na resposta. Pode?<script src=""......... Commented 19/09/2015 às 15:01
  • No meu estava faltando a abertura e o fechamento $(document).ready(function(){ e });. rsrs. Agora é tentar adaptar isso ao php. Commented 19/09/2015 às 17:43

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 .