Adding search functionality in select options using Bootstrap
<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>