Agregar funcionalidad de búsqueda en opciones seleccionadas usando Bootstrap

Question

Mar 15, 2016, 08:46 AM

Agregar funcionalidad de búsqueda en opciones seleccionadas usando Bootstrap

He estado tratando de agregar funcionalidad de búsqueda en el formulario de selección usando bootstrap. Este es mi código

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="http://getbootstrap.com/favicon.ico">

  <title>Depots list</title>

  <!-- Bootstrap core CSS -->
  <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Latest compiled and minified bootstrap-select CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="http://getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
  <link href="./css/st.css" rel="stylesheet">

 <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
 <!--[if lt IE 9]><script src="http://getbootstrap.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 <script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>

 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>



<body>

<div class="container">

  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <!-- /.box-header -->
        <div class="box-body">
                  <form>
                   <div class="form-group row">
                   <label for="" class="col-sm-2 form-control-label">Country</label>
                  <div class="col-sm-10">
                    <select class="form-control selectpicker" id="select-country" placeholder="" data-live-search="true">
                        <options>China</options>
                        <options>Malaysia</options>
                        <options>Singapore</options>
                    </select>
                  </div>
                </div>
              </form>
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
</div><!-- /.container -->

Tengo un problema con la contradicción entrecontrol de forma yseleccionar clases en forma selecta. Mi código solo funciona paracontrol de forma clase.

Para las búsquedas de selección he usado esto:http://silviomoreto.github.io/bootstrap-select/examples/#key-words

Mi pregunta es: ¿cómo puedo usar amboscontrol de forma yseleccionar clases en la etiqueta de selección? He usado el procedimiento normal para escribir el nombre de la clase con un espacio. Pero parece que no funciona.