尝试将数据实时搜索设置为选择选择器

时间:2017-01-18 11:00:47

标签: jquery bootstrap-selectpicker

selectpicker

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/', { // works
        templateUrl : 'templates/main.html',
        controller: 'MainCtrl'
    }).when('/:lang', { // works
        templateUrl : 'templates/main.html',
        controller: 'MainCtrl'
    }).when('/:lang/premium-benefits', { // works
        templateUrl : 'templates/premium_benefits.html',
        controller: 'PremiumBenefitsCtrl'
    }).when('/:lang/:country', { // NOT working
        templateURL : 'templates/destination.html',
        controller: 'DestinationCtrl'
    }).when('/:lang/:country/:city', { // NOT working
        templateURL : 'templates/destination.html',
        controller: 'DestinationCtrl'
    }).otherwise({
        templateURL : 'main.html'
    });

    $locationProvider.html5Mode({enabled: true, requireBase: true});
}]);

选择选择器css

$('.selectpicker').selectpicker();
$("#s1").addClass("btn-sm");
//set to current value$("#s1").selectpicker('val', picker[0]["f_name"]);
$("#s1").selectpicker("refresh");

这是我的代码。我想在我的选择选择器中设置搜索。我该怎么办?

2 个答案:

答案 0 :(得分:2)

<div class="live-search" >
    <select class="selectpicker" data-live-search="true" >
       <option data-tokens="text" >text</option>                               
     </select>
 </div>

您必须添加 src =“ https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js”

答案 1 :(得分:1)

selectpicker函数应该是jquery的ready方法。

也可以尝试

{{1}}

而不是html中的data-live-search =“true”。