Fill a textbox with combobox element

Question

Fill a textbox with combobox element

Asked 8 years, 3 months ago

Viewed 498 times

7

I have a combobox connected to a textbox by a function. It works like this: while the person type something in the textbox, a kind of 'filter' is automatically performed in the combobox, which shows something that could correspond to what the person wants to inform (in this case, a city).

<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="javascript">
    function trocaOpcao(valor, objSel) {
        for (i=0; i < objSel.length; i++){
            qtd = valor.length;
            if (objSel.options[i].text.substring(0, qtd).toUpperCase() == valor.toUpperCase()) {
                objSel.selectedIndex = i;
                break;
            }
        }
    }
</script>
<style>
  /*removendo o estilo do select*/
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
        border: none;
    }
</style>

</head>
<body>
<form name="form">
<input type="text" name="texto" onkeyup="trocaOpcao(this.value, document.form.cidade);"></br>
<select disabled name="cidade">
    <option selected>Sua Cidade</option>
    <option>sao paulo</option>
    <option>rio de janeiro</option>
    <option>vitoria</option>
    <option>belem</option>
    <option>recife</option>
    <option>santa luzia</option>
    <option>santa cruz</option>
    <option>santarem</option>
</select>
</form>

</body>
</html>

I would like to know how to fill the textbox contents automatically with the filtered contents of the combobox when giving enter or tab. From now on, thank you.

2 answers

Browser other questions tagged combobox textbox

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

by Rafael Rotiroti • **493** points · Answer 1 · 2016-09-21T23:05:32+00:00

I think if I understood the jQuery can meet you

<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
  /*removendo o estilo do select*/
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
        border: none;
    }
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<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>
</head>
<body>
<form name="form">
<input type="text" id="descricao" />
<input type="hidden" name="idQueVaiParaSeuBackEnd" id="id" />
</form>

<script>
var source = [{
    label: "sao paulo",
    value: "1234"
}, {
    label: "rio de janeiro",
    value: "12321"
}];
/*

Suas cidades devem ser cadastradas no label acima.

*/
$("#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();
    }
});
</script>

</body>
</html>

Testing by filling : river or are

I really like using jQuery in my applications, it makes even understanding Javascript much easier !

I hope I’ve helped you.

by Klayton Cavalcante • 11 points · Answer 2 · 2020-06-08T03:32:50+00:00

I suggest the use of the element <datalist>. It adds the autocomplete feature to the input natively.

The page in w3schools has a functional example: https://www.w3schools.com/tags/tag_datalist.asp

Example, taken from the link above:

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

In your case, the code would look like this:

<input type="text" list="cidade" name="texto">
<datalist id="cidade">
    <option>sao paulo</option>
    <option>rio de janeiro</option>
    <option>vitoria</option>
    <option>belem</option>
    <option>recife</option>
    <option>santa luzia</option>
    <option>santa cruz</option>
    <option>santarem</option>
</datalist>

See what we have there instead of a <select> we have a <datalist> which has the ID set to "city" and <input> we have the parameter list="cidade", which is responsible for referencing which datalist to use.

Edit: only after posting the answer was I noticed that the question is 2016! But here is the record of an updated response with other options that exist now.