Searchbox with city (select2)

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">
<div class="container">
  <br/>
  <div class="input-group input-group-lg select2-bootstrap-append">

    <select id="lunch" class="form-control js-select2-test" data-live-search="true" title="Please select a lunch ..." multiple>
      <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" name="snpid" placeholder="Test"> <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...

SCSS

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

JavaScript

$(".js-select2-test").select2({
	theme: "bootstrap",
  width: "40%"
});