AutocompleteJS é um plugin feito apenas com javascript puro. Não requer o uso da bilioteca jQuery, basta importar no seu projeto para começar a brincar.
- Importa o arquivo js e css
<link href="css/AutocompleteJs.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/AutocompleteJs.js"></script>- Cria no HTML o combobox
<div class="form-group row">
<label for="frutas" class="col-sm-2 col-form-label">UF</label>
<div class="col-sm-10">
<select name="uf" id="uf">
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
</div>
</div>- Instancia a classe no javascript passando o 'id' como parmâmetro
<script type="text/javascript">
let obj = new AutocompleteJS('uf');- Cria no HTML o combo vazio
<select name="uf" id="uf">
</select>- Instancia a classe e invoca o método "setOptions()" passando nos parâmetros um array de objetos com os indices "id" e "name":
<script type="text/javascript">
let obj = new AutocompleteJS('uf');
obj.setOptions([
{id: "AC", name: "Acre"},
{id: "AL", name: "Alagoas"},
{id: "AP", name: "Amapá"},
{id: "AM", name: "Amazonas"},
{id: "BA", name: "Bahia"},
{id: "CE", name: "Ceará"},
{id: "DF", name: "Distrito Federal"},
...
]);Pegando o valor selecionado no combo
obj.getValue();Setando o valor no combo via javascript. Será selecionado automaticamente o item com o valor informado
obj.setValue('PA');ou
Setando o valor na propriedade "data-value" no próprio combo do HTML:
<select name="uf" id="uf" data-set="{SETA_AQUI_O_VALOR}"></select>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent