Fill a textbox with element of a combobox

Question

Fill a textbox with element of a combobox

Navigation

#1 by (0 votes)

5

I have a combobox connected to a textbox by a function. It works like this: while the person types something in the textbox, a kind of 'filter' is automatically performed in the combobox, which shows something that could match what the person wants to report (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'd like to know how to populate the contents of the textbox automatically with the filtered contents of the combobox by giving 'enter' or 'tab'. Thanks in advance.

combobox textbox

asked by anonymous 21.09.2016 / 21:22

1 answer

How to restart or continue the script What is the best way to do the authorization with JWT? [closed]

score 0 · Answer 1

I think if I understood jQuery can answer 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><scriptsrc="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>

Test filling: rio or são

I really like using jQuery in my applications, it makes it even easier to understand Javascript!

I hope I have helped you.