Eu tenho uma combobox conectada a um textbox por uma função. Funciona assim: ao passo que a pessoa digita algo na textbox, é automaticamente realizado uma espécie de 'filtro' na combobox, que mostra algo que poderia corresponder ao que a pessoa deseja informar (no caso, uma cidade).
<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>
Eu gostaria de saber como preencher o conteúdo da textbox automaticamente com o conteúdo filtrado da combobox ao dar 'enter' ou 'tab'. Desde já, agradeço.