可以搜索的下拉菜单bootstrap

　　在做项目的时候需要动态添加一个下拉菜单，用selectpicker就不能满足了，所以自己利用bootstrap写了一个在这里简单分享一下。

效果如下

话不多说，直接贴代码

1、html部分:

<html>
 <meta charset="utf-8">
 <link rel="stylesheet" href="./V2/OA/Public/css/bootstrap.min.css">

 <div class="btn-group">
  <button type="button" id="web" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">发布网站
   <span class="caret"></span>
  </button>
  <ul class="dropdown-menu ngxSelect" bindId="web" bindValueId="webid" role="menu">
    <span><input type=\'text\'></span>
    <li><a data-val="1" href="#">功能</a></li>
    <li><a data-val="2" href="#">另一个功能</a></li>
    <li><a data-val="3" href="#">其他</a></li>
  </ul>
  <input type="hidden" name="webid" id="webid">
 </div>

 <script src="./V2/OA/Public/js/jquery-2.0.3.min.js"></script>
 <script src="./V2/OA/Public/js/bootstrap.js"></script>
<script src="ngxSelect.js"></script>

</html>
2、js部分

var ngxId = $(\'.ngxSelect\').attr(\'bindID\');//绑定的id
var valueId = $(\'.ngxSelect\').attr(\'bindValueId\');//绑定的值id

/*-- 实时监测事件 --*/
$(".ngxSelect span input").bind(\'input propertychange\',function () {
    var val = $(this).val();
    $(\'.ngxSelect li\').attr(\'style\',\'display:block\');
    if(val != \'\'){
        $(\'.ngxSelect li a\').each(function (index,ele) {
            if($(this).html().indexOf(val) == -1){
                $(this).parent().attr(\'style\',\'display:none\');
            }
        });
    }
});

/*-- 改变主体和值 --*/
$(\'.ngxSelect li a\').click(function () {
    $(\'#\' + valueId).val($(this).attr(\'data-val\'));
    $(\'#\' + ngxId).html($(this).html());
});