Searchbox with city (typeahead)

by Christian Unigarro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.1.0/typeahead.bundle.min.js"></script>
<div class="container">
  <br/>
  <div class="my-search-box">
    <form class="form-inline">
      <div class="form-group typeahead-wrapper">
        <input type="text" class="form-control js-typeahead-test icon input-lg ta-ciudades" name="snpid">
      </div><!--
    --><div class="form-group searchbox">
        <div class="input-group my-group">
          <input type="text" class="form-control input-lg ta-buscador js-ta-professions" name="snpid" placeholder="Busca por palabra o código"> <span class="input-group-btn">
    <button class="btn btn-default btn-primary btn-lg hidden-xs" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
  </span>
        </div>
      </div>
      <!-- /input-group -->
      <button class="btn btn-default btn-primary btn-block visible-xs btn-lg" type="submit"><i class="fa fa-search" aria-hidden="true"></i> Buscar ofertas</button>
    </form>
  </div>
</div>

SCSS

.my-search-box {
  width: 100%;
  
  @media (min-width: 768px) {
    width: 550px;
  }
}

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

.input-group {
  width: 100%;
}

.typeahead-wrapper,
.searchbox {
  display: inline-block;
  vertical-align: top;
}

.typeahead-wrapper {
  width: 100%;
  position: relative;
  
  &:before {
      font-family: 'FontAwesome';
      content: "\f041";
      position: absolute;
      top: 11px;
      left: 10px;
      z-index: 1;
      font-size: 18px;
    }
  
  @media (min-width: 768px) {
    width: 30%;
  }
  
  .twitter-typeahead {
    width: 100%;
  }
}

.ta-ciudades {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
  
  @media (min-width: 768px) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
  }
  
  &:focus {
    border-right-width: 1px;
  }
}

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

.ta-buscador.form-control:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  
  @media (min-width: 768px) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.searchbox {
   width: 100%;
  
  @media (min-width: 768px) {
    width: 65%;
  }
}

.input-group-btn {
  width: 0;
  
  @media (min-width: 768px) {
    width: 1%;
  }
}

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon {
    padding:5px;
    position: relative;
    padding-left: 20px;
}



// 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:...

JavaScript

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",
    "San Vicente",
    "Santa...