Searchbox with city (chosen)

HTML

<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css">
<div class="container">
  <br/>
  <div class="input-group my-group">

    <select id="lunch" class="chosen-test form-control my-select" data-live-search="true" title="Please select a lunch ...">
      <option>Hot Dog, Fries and a Soda</option>
      <option>Burger, Shake and a Smile</option>
      <option>Sugar, Spice and all things nice</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>Baby Back Ribs</option>
      <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
    </select>
    <input type="text" class="form-control my-input input-lg" name="snpid" placeholder="Test"> <span class="input-group-btn">
    <button class="btn btn-primary btn-lg" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
  </span>

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

SCSS

.my-group {
  width: 550px; 
}

.my-group .my-select + .chosen-container {
  float: left;
  
  .chosen-single {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
		 height: 46px;
		 line-height: 46px;	 
  }

  .chosen-drop {
    width: 270px;
  }
}

.my-group .my-input {
    width:70%;
}

/*--------Bootstrap chosen----------*/
.chosen-select {
  width: 100%; }

.chosen-select-deselect {
  width: 100%; }

.chosen-container {
  display: inline-block;
  font-size: 14px;
  position: relative;
  vertical-align: middle; }
  .chosen-container .chosen-drop {
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
    margin-top: -1px;
    position: absolute;
    top: 100%;
    left: -9000px;
    z-index: 1060; }
  .chosen-container.chosen-with-drop .chosen-drop {
    left: 0;
    right: 0; }
  .chosen-container .chosen-results {
    color: #555555;
    margin: 0 4px 4px 0;
    max-height: 240px;
    padding: 0 0 0 4px;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
    .chosen-container .chosen-results li {
      display: none;
      line-height: 1.42857;
      list-style: none;
      margin: 0;
      padding: 5px 6px; }
      .chosen-container .chosen-results li em {
        background: #feffde;
        font-style: normal; }
      .chosen-container .chosen-results li.group-result {
        display: list-item;
        cursor: default;
        color: #999;
        font-weight: bold; }
      .chosen-container .chosen-results li.group-option {
        padding-left: 15px; }
      .chosen-container .chosen-results li.active-result {
        cursor: pointer;
        display: list-item; }
      .chosen-container .chosen-results li.highlighted {
        background-color: #337ab7;
        background-image: none;
        color:...

JavaScript

$(".chosen-test").chosen({
 		width: "30%",
    no_results_text: "No se encuentran resultados.",
		max_shown_results: 6,
    z  : 1
 });