Fill select with Jquery

Question

Fill select with Jquery

Asked 8 years, 9 months ago

Viewed 1,270 times

0

I am using the Jquery autocomplete and it is working noralmente. But, this populating a type text that contains only one field (txt itself) to fill.

I would like a select to be filled instead of txt.

Somebody help me out?

Follows the code

<!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>

I’d like to change the

<input id="clientes">

For

<select name="clienteEscolhido">
  <option value=""></option>
</select>

jquery autocomplete it was fetus to run on top of text field same, for you use it in combobox I think you are looking for a multiselect with search. Something like this https://select2.github.io/examples.html would that be? or you may be wanting something like this https://jqueryui.com/resources/demos/autocomplete/combobox.html but it is not done on top of a combo but a normal input with a list :D

– Brunno

2015/09/19 at 13:33
Good. It’s the following. The combobox (select), has 2 fields. One with the value of the option that brings the id of the Client and a text that bears the name of the client. <option value"idClient">Client Name</option>. This field will be submitted in a form to take the Client id on the other side and display its data! That’s why select needs to be this way!

– Carlos Rocha

2015/09/19 at 14:01
Carlos, you can do this directly by autocomplete in the type="text" field even using the key and value.. ai in the auto select complete you arrow the id in an Hidden field to be sent in your form. I will post an example in the answer :D

– Brunno

2015/09/19 at 14:14
I don’t quite understand your question. You want to type in input same turn a select?

– Randrade

2015/09/19 at 14:37
No, I do, I want to type in the select itself. Select won’t let you type because when you click on the text it opens the combobox. Right, but I wish I could type. The perfect example would be what is on this link. But is there Jquery script saw? There is no way to decrease no? rsrs. https://jqueryui.com/resources/demos/autocomplete/combobox.html

– Carlos Rocha

2015/09/19 at 14:46

1 answer

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by Brunno • **3,531** points · Answer 1 · 2015-09-19T14:28:19+00:00

Follows a solution using a <input type="text" /> and a <input type="hidden" /> . It consists of taking the event of your auto complete selection and set the description in the text and the Id to be sent to your backend in the field 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>

Follows the jsfiddle.