Select with States and Cities Search

Question

I am here creating a form where the person should choose the state and after selected the list of corresponding cities is loaded in the other select, I am using a ready library city-states-js, so far so good, only I had the idea and add also the plugin Chosen, creating a search option within select.

However when I put these two together it does not work, when I select the state the city list is not loaded, as you can see in the example below. I even used a Update code you have in the plugin documentation Chosen, but it didn’t work.

$('#estado2').chosen({
  placeholder_text_single: 'Procure seu Estado',
  no_results_text: 'Nenhum resultado: '
});

$('#cidade2').chosen({
  placeholder_text_single: 'Procure sua Cidade',
  no_results_text: 'Nenhum resultado: '
});

$("#estado2").trigger("chosen:updated");
$("#cidade2").trigger("chosen:updated");

select {
  padding: 5px 15px;
}

hr {
  margin-top: 35px;
  margin-bottom: 35px;
}

<script src="https://webmachado.com.br/js/jquery-3.2.0.js"></script>
<script src="https://webmachado.com.br/js/cidades-estados-1.4-utf8.js"></script>
<script src="https://webmachado.com.br/js/chosen.jquery.min.js"></script>
<link href="https://webmachado.com.br/js/chosen.min.css" rel="stylesheet" />




<select id="estado"></select>
<select id="cidade">
        <option value="">Selecione uma cidade </option>
</select>


<hr />

<p>Com o plugin Chosen</p>
<select id="estado2"></select>
<select id="cidade2">
        <option value="">Selecione uma cidade </option>
</select>

<script language="JavaScript" type="text/javascript" charset="utf-8">
  new dgCidadesEstados({
    cidade: document.getElementById('cidade'),
    estado: document.getElementById('estado')
  });

  new dgCidadesEstados({
    cidade: document.getElementById('cidade2'),
    estado: document.getElementById('estado2')
  });
</script>

Answer 1

We need to call the .trigger("chosen:updated"); select of cities after the status select is changed or has an option selected. However, if you call immediately, the Chosen plugin ends up trying to update before the values of the cities are filled. To resolve this, just put a small delay of 100 milliseconds before calling the update, that way:

dgCidadeEstados = new dgCidadesEstados({
  cidade: document.getElementById('cidade'),
  estado: document.getElementById('estado')
});

$("#cidade").chosen({
  placeholder_text_single: 'Procure sua Cidade',
  no_results_text: 'Nenhum resultado: '
});

$("#estado").chosen({
  placeholder_text_single: 'Procure sua Cidade',
  no_results_text: 'Nenhum resultado: '
}).change(function() { // configura uma função para o evento change do select de estados
  setTimeout(function() { // seta um atraso de 100ms e aciona o evento 'updated' do select de cidades, fazendo que seja atualizado
    $("#cidade").trigger("chosen:updated");
  }, 100);
});

select {
  padding: 5px 15px;
}

hr {
  margin-top: 35px;
  margin-bottom: 35px;
}

<script src="https://webmachado.com.br/js/jquery-3.2.0.js"></script>
<script src="https://webmachado.com.br/js/cidades-estados-1.4-utf8.js"></script>
<script src="https://webmachado.com.br/js/chosen.jquery.min.js"></script>
<link href="https://webmachado.com.br/js/chosen.min.css" rel="stylesheet" />



<select id="estado" class="chosen"></select>
<select id="cidade" class="chosen"><option>Selecione uma cidade</option></select>

Answer 2

Follow a select in States Vue with images

let app = new Vue({
el:'#seluf',
  data: {
      filtro:'', showlist:false,
      estados : [
        {id: '', nome: 'Selecione'},
        {id: 'AC', nome: 'Acre'},
        {id: 'AL', nome: 'Alagoas'},
        {id: 'AP', nome: 'Amapá'},
        {id: 'AM', nome: 'Amazonas'},
        {id: 'BA', nome: 'Bahia'},
        {id: 'CE', nome: 'Ceará'},
        {id: 'DF', nome: 'Distrito Federal'},
        {id: 'ES', nome: 'Espírito Santo'},
        {id: 'GO', nome: 'Goiás'},
        {id: 'MA', nome: 'Maranhão'},
        {id: 'MT', nome: 'Mato Grosso'},
        {id: 'MS', nome: 'Mato Grosso do Sul'},
        {id: 'MG', nome: 'Minas Gerais'},
        {id: 'PA', nome: 'Pará'},
        {id: 'PB', nome: 'Paraíba'},
        {id: 'PR', nome: 'Paraná'},
        {id: 'PE', nome: 'Pernambuco'},
        {id: 'PI', nome: 'Piauí'},
        {id: 'RJ', nome: 'Rio de Janeiro'},
        {id: 'RN', nome: 'Rio Grande do Norte'},
        {id: 'RS', nome: 'Rio Grande do Sul'},
        {id: 'RO', nome: 'Rondônia'},
        {id: 'RR', nome: 'Roraima'},
        {id: 'SC', nome: 'Santa Catarina'},
        {id: 'SP', nome: 'São Paulo'},
        {id: 'SE', nome: 'Sergipe'},
        {id: 'TO', nome: 'Tocantins'}
      ]
    },
  methods:{
    atualiza(){
      this.$emit("change",this.id);
      this.$emit("input",this.id);
    },
    seleciona(id,nome){
      this.filtro=nome;
      this.id=id;
      this.showlist=0;
      this.atualiza();
    },

  },

})

span.select2 {
  width: 300px !important;
}

.flag-text {
  margin-left: 10px;
}

.flag-icon,
.flag-icon-background {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%
}

.flag-icon {
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em
}

.flag-icon:before {
  content: "\00a0"
}

.flag-icon.flag-icon-squared {
  width: 1em
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

  <div id='seluf' class='container'>
    <label>Estado</label>
    <div class="input-group">
      <input v-model="filtro" @click="showlist=1" class="form-control">
      <div  @click="showlist=1" class="input-group-append">
        <button  @click="showlist=1" class="btn btn-secondary" type="button"><i class="fal fa-arrow-down"></i></button>
      </div>
    </div>
    <div v-show="showlist==1" style="height: 160px; overflow-y: scroll;background-color: white; position:absolute; z-index: 999; width: 100%; border: solid thin #e5e5e5;">
      <div v-for="item in estados" @click='seleciona(item.id,item.nome)' :value="item.id" v-show="(item.id + ' ' + item.nome).toLowerCase().includes(filtro.toLowerCase())">
        <span class="'flag-icon flag-icon-squared'"><img v-show="item.id!=''" :src="'https://sijur.com.br/sistema/app/assets/local/img/uf/' + item.id.toLowerCase() + '.gif'" height="12px"></span>
        <span class="flag-text">{{item.nome}}</span>
      </div>
    </div>
  </div>