Some problems in the process of using the bootstrap-select

 

Summarize here some of the problems the last process of using the bootstrap-select encountered. As for the specific use of bootstrap-select is not presented here, there are many online examples.

Address :

Official Plugins Address: https://developer.snapappointments.com/bootstrap-select

GitHub Address: https://github.com/snapappointments/bootstrap-select

 

One problem: Click unresponsive, drop-down box does not appear

The reason : js file may be introduced in the wrong order.

The correct order of introduction :

<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="lib/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap-select/js/bootstrap-select.js"></script>

 

Second problem: how to load dynamic data

Method One :

$.get("/test/ajax", function(result){
    if(result.code == 0){
        var addhtml = "";
        for (var i = 0; i < result.data.length; i++){
            addhtml += "<option value="+ result.data[i]['id'] +">"+ result.data[i]['name'] +"</option>";
        }
        $('.selectpicker').html(addhtml);
    }
});

Method Two :

$.get("/test/ajax", function(result){
    if(result.code == 0){
        for (var i = 0; i < result.data.length; i++){
            $('.selectpicker').append("<option value="+ result.data[i]['id'] +">"+ result.data[i]['name'] +"</option>");
        }
    }
});

 

Question three: the dynamic loading data does not show

The reason : no plug-refresh after dynamically generated data

Solution : Loading adding the following two statements after the success.

// The refresh method to match the new status update the UI 
$ ( 'selectpicker.') Selectpicker ( 'refresh'. );
 // the render method of forced to re-render the boot program 
$ ( 'selectpicker.') Selectpicker ( 'render').;

 

Question 4: When using filters, if there is Chinese and English at the same time, the search will have problems

Solution :

Notes bootstrap-select.js file the following code:

that.$lis.not('.hidden, .divider, .dropdown-header').eq(0).addClass('active').children('a').focus();
$(this).focus();