使用引導程序在選擇選項中添加搜索功能

我一直在嘗試使用引導程序在選擇窗體中添加搜索功能。這是我的代碼 -使用引導程序在選擇選項中添加搜索功能

<!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 -->

我有問題，形式控制和selectpicker班在選擇形式之間的矛盾。我的代碼僅適用於窗體控件類。

對於選擇搜索我已經使用這個 - http://silviomoreto.github.io/bootstrap-select/examples/#key-words

我的問題是 - 我怎麼能同時使用形式控制和selectpicker班在選擇標籤的？我用正常的過程來寫一個空格的類名。但它似乎不工作。

來源

2016-03-15 ni8mr

什麼問題？什麼不按預期工作？ –

要獲得搜索功能，您必須爲每個選項設置data-tokens屬性。這是您添加後的代碼。讓我知道你是否需要額外的幫助。

$(function() { 
 
    $('.selectpicker').selectpicker(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" /> 
 

 

 

 

 
<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" data-live-search="true"> 
 
       <option data-tokens="china">China</option> 
 
    <option data-tokens="malayasia">Malayasia</option> 
 
    <option data-tokens="singapore">Singapore</option> 
 
       </select> 
 

 
       </div> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     <!-- /.box-body --> 
 
     </div> 
 
     <!-- /.box --> 
 
    </div> 
 
    <!-- /.col --> 
 
    </div> 
 
    <!-- /.row --> 
 
</div> 
 
<!-- /.container -->

來源

2016-03-15 10:43:47

謝謝，我的問題是通過使用數據令牌解決的。另外，我遇到的一些問題是由於一些瀏覽器問題。 – ni8mr

使用引導程序在選擇選項中添加搜索功能

回答

相關問題