bootstrap-select下拉框模糊搜索和动态绑定数据

前言

今天做项目的时候，需要对下拉框做一个模糊搜索，就想到了bootstrap-select插件， 在运用中遇到的问题进行总结下。

引入

引入bootstrap和bootstrap-select文件

 <link rel="stylesheet" href="/bootstrap/css/bootstrap.css" />
 <link rel="stylesheet" href="/bootstrap/css/bootstrap-select.min.css">
 <script type="text/javascript" src="/bootstrap/bootstrap.js"></script>
 <script type="text/javascript" src="/bootstrap/bootstrap-select.min.js"></script>

html

<select class="selectpicker" data-live-search="true"></select>

动态获取

 $.ajax({
         type: 'post',
         url: url,
         contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
         dataType:   "json",
         success: function (data) {
             var tempIdStr = '<option  value="">选择</option>';
             $("#field").append(tempIdStr);
             $.each(data.resultMsg, function (i, item) {
                 var tempId = '<option  value="' + item.field + '">' + item.field + '</option>';
                 $("#field").append(tempId);
             });
              // 更新 。 这一步很重要
             $('#field').selectpicker('refresh');
         }
     });

// 更新

  $('#field').selectpicker('refresh');

设置默认选中

$('#field').selectpicker('val', 默认选中的值); 

模糊搜索提示中文

  <script type="text/javascript" src="/bootstrap/i18n/defaults-zh_CN.min.js"></script>

效果

结束

希望我写的这个对大家有所帮助！