因为最近在写工具箱，所以研究了几种搜索功能，找到这款bootstrap下拉搜索还不错，所以分享给大家
<!DOCTYPE html>
<html>
<head>
<title>bootstrap下拉搜索demo</title>
</head>
<body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<select id="basic" class="selectpicker" data-live-search="true">
<option data-subtext="1">1</option>
<option data-subtext="2">2</option>
<option data-subtext="3">3</option>
<option data-subtext="这是测试">这是测试</option>
<option data-subtext="zscs">zscs</option>
</select>
<script type="text/javascript">
$('.selectpicker').on('changed.bs.select',function(e){
//返回选中内容
alert($('#basic').val());
});
</script>
</body>
</html>
发表评论：