Searchbox with city (select2 petición asíncrona)

by Christian Unigarro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.6/select2-bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.1.0/typeahead.bundle.min.js"></script>
<div class="container">
  <br/>
  <div class="input-group input-group-lg select2-bootstrap-append my-group">

    <select id="lunch" class="form-control js-select2-test" data-live-search="true" title="Please select a lunch ..."></select>
    <input type="text" class="form-control my-input input-lg js-ta-professions ta-buscador" name="snpid" placeholder="Busca por palabra o código"> <span class="input-group-btn">
    <button class="btn btn-primary" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
  </span>

  </div>
  <!-- /input-group -->
</div>
<div>

SCSS

.my-group {
  width: 550px; 
}

.my-input.form-control {
  width: calc(65% + 1px);
  margin-left: -1px;
}

.twitter-typeahead {
  width: 65%;
  
  .form-control {
    width: 100% !important;
  }
}

.select2-container .select2-dropdown.bigdrop {
  width: 250px !important;
  border: thin solid #66afe9;
}

.select2-selection {
  
  .select2-selection__rendered {
    font-size: 15px;
  }
}

.select2-container .select2-dropdown.bigdrop {
  width: 250px !important;
}

// TODO: Review how typeahead fit with bootstrap
// TAG: TYPEAHEADBOOTSTRAP
.typeahead {
  border: 1px solid #ccc;
}
.twitter-typeahead {
  padding: 0;
  vertical-align: top;
}
.typeahead,
.form-control.tt-hint,
.form-control.tt-input {
  background-color: #fff;
  background-image: none;
  color: #555;
  display: block;
  font-size: inherit;
  line-height: 1.42857143;
  outline: none;
  padding: 6px 10px;
  padding-left: 30px;
  width: 100%;
}
.tt-menu {
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 16px;
  text-align: left;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}
.tt-suggestion:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
.tt-suggestion.tt-cursor {
  background-color: #f5f5f5;
}

.ta-buscador {
  padding: 6px 10px !important;
}


.visuallyhidden {
  display: none;
}

JavaScript

var $select2 = $(".js-select2-test");

var dataCities = [
    "Leticia",
    "Puerto Nari\u00f1o",  
    "Abejorral",
    "Abriaqu\u00ed",
    "Alejandr\u00eda",
    "Amag\u00e1",
    "Amalfi",
    "Andes",
    "Angel\u00f3polis",
    "Angostura",
    "Anor\u00ed",
    "Anz\u00e1",
    "Apartad\u00f3",
    "Arboletes",
    "Argelia",
    "Armenia",
    "Barbosa",
    "Bello",
    "Belmira",
    "Betania",
    "Betulia",
    "Brice\u00f1o",
    "Buritic\u00e1",
    "C\u00e1ceres",
    "Caicedo",
    "Caldas",
    "Campamento",
    "Ca\u00f1asgordas",
    "Caracol\u00ed",
    "Caramanta",
    "Carepa",
    "Carolina del Pr\u00edncipe",
    "Caucasia",
    "Chigorod\u00f3",
    "Cisneros",
    "Ciudad Bol\u00edvar",
    "Cocorn\u00e1",
    "Concepci\u00f3n",
    "Concordia",
    "Copacabana",
    "Dabeiba",
    "Donmat\u00edas",
    "Eb\u00e9jico",
    "El Bagre",
    "El Carmen de Viboral",
    "El Pe\u00f1ol",
    "El Retiro",
    "El Santuario",
    "Entrerr\u00edos",
    "Envigado",
    "Fredonia",
    "Frontino",
    "Giraldo",
    "Girardota",
    "G\u00f3mez Plata",
    "Granada",
    "Guadalupe",
    "Guarne",
    "Guatap\u00e9",
    "Heliconia",
    "Hispania",
    "Itag\u00fc\u00ed",
    "Ituango",
    "Jard\u00edn",
    "Jeric\u00f3",
    "La Ceja",
    "La Estrella",
    "La Pintada",
    "La Uni\u00f3n",
    "Liborina",
    "Maceo",
    "Marinilla",
    "Medell\u00edn",
    "Montebello",
    "Murind\u00f3",
    "Mutat\u00e1",
    "Nari\u00f1o",
    "Nech\u00ed",
    "Necocl\u00ed",
    "Olaya",
    "Peque",
    "Pueblorrico",
    "Puerto Berr\u00edo",
    "Puerto Nare",
    "Puerto Triunfo",
    "Remedios",
    "Rionegro",
    "Sabanalarga",
    "Sabaneta",
    "Salgar",
    "San Andr\u00e9s de Cuerquia",
    "San Carlos",
    "San Francisco",
    "San Jer\u00f3nimo",
    "San Jos\u00e9 de la Monta\u00f1a",
    "San Juan de Urab\u00e1",
    "San Luis",
    "San Pedro de Urab\u00e1",
    "San Pedro de los Milagros",
    "San Rafael",
    "San Roque",
   ...