title: Adding search functionality in select options using Bootstrap
body: <p>I have been trying to add search functionality in the select form using bootstrap. This is my code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;
    &lt;link rel=&quot;icon&quot; href=&quot;http://getbootstrap.com/favicon.ico&quot;&gt;
  
    &lt;title&gt;Depots list&lt;/title&gt;
  
    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link href=&quot;http://getbootstrap.com/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  
    &lt;!-- Latest compiled and minified bootstrap-select CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css&quot;&gt;
  
    &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
    &lt;link href=&quot;http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css&quot; rel=&quot;stylesheet&quot;&gt;
  
    &lt;!-- Custom styles for this template --&gt;
    &lt;link href=&quot;http://getbootstrap.com/examples/starter-template/starter-template.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;./css/st.css&quot; rel=&quot;stylesheet&quot;&gt;
  
   &lt;!-- Just for debugging purposes. Don't actually copy these 2 lines! --&gt;
   &lt;!--[if lt IE 9]&gt;&lt;script src=&quot;http://getbootstrap.com/assets/js/ie8-responsive-file-warning.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;
   &lt;script src=&quot;http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js&quot;&gt;&lt;/script&gt;
  
   &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
   &lt;!--[if lt IE 9]&gt;
   &lt;script src=&quot;https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js&quot;&gt;&lt;/script&gt;
   &lt;script src=&quot;https://oss.maxcdn.com/respond/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;
   &lt;![endif]--&gt;
   &lt;/head&gt;
  
  
  
  &lt;body&gt;
  
  &lt;div class=&quot;container&quot;&gt;
  
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-xs-12&quot;&gt;
        &lt;div class=&quot;box&quot;&gt;
          &lt;!-- /.box-header --&gt;
          &lt;div class=&quot;box-body&quot;&gt;
                    &lt;form&gt;
                     &lt;div class=&quot;form-group row&quot;&gt;
                     &lt;label for=&quot;&quot; class=&quot;col-sm-2 form-control-label&quot;&gt;Country&lt;/label&gt;
                    &lt;div class=&quot;col-sm-10&quot;&gt;
                      &lt;select class=&quot;form-control selectpicker&quot; id=&quot;select-country&quot; placeholder=&quot;&quot; data-live-search=&quot;true&quot;&gt;
                          &lt;options&gt;China&lt;/options&gt;
                          &lt;options&gt;Malaysia&lt;/options&gt;
                          &lt;options&gt;Singapore&lt;/options&gt;
                      &lt;/select&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
          &lt;/div&gt;&lt;!-- /.box-body --&gt;
        &lt;/div&gt;&lt;!-- /.box --&gt;
      &lt;/div&gt;&lt;!-- /.col --&gt;
    &lt;/div&gt;&lt;!-- /.row --&gt;
  &lt;/div&gt;&lt;!-- /.container --&gt;
  </code></pre>
     
     
  <p>I have problem with contradiction between <strong>form-control</strong> and <strong>selectpicker</strong> classes in select form. My code works only for <strong>form-control</strong> class.</p>
  <p>For selection searches I have used this: <a href="https://developer.snapappointments.com/bootstrap-select/examples/#live-search" rel="nofollow noreferrer">https://developer.snapappointments.com/bootstrap-select/examples/#live-search</a></p>
  <p>My question is: How can I use both of the <strong>form-control</strong> and <strong>selectpicker</strong> classes in select tag? I have used normal procedure to write the class name with a space. But it seems not to work.</p>