title: How can i add a search input field in my dropdown?
body: <p>I'm trying to do a drop-down with all of my "Stations". I have managed to get all my data from the database into my drop-down, but i would like to add a search field into my drop-down, to make it easier for the user to search for the wanted "Station".
  Here is how my drop-down looks for the moment:</p>
  
  <pre><code>&lt;div&gt;
      &lt;select class="form-control"&gt;
          &lt;option&gt;--Select--&lt;/option&gt;       
          @foreach (var item in ViewBag.ListOfDropdown)
          {
              &lt;option value="@item.Id"&gt;@item.Name&lt;/option&gt;
          }
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is how i would like to look my drop down ( just an example found on w3school ):</p>
  
  <pre><code>&lt;ul class="dropdown-menu"&gt;
        &lt;input class="form-control" id="myInput" type="text" placeholder="Search.."&gt;
        &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;jQuery&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Bootstrap&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Angular&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
    $("#myInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $(".dropdown-menu li").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) &gt; -1)
      });
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any ideea if i can integrate this with my existing dropdown?</p>