bootstrap下拉搜索框

Youngxj

发布于 2018-06-06 13:56:36

4.2K0

发布于 2018-06-06 13:56:36

文章被收录于专栏：YoungxjYoungxj

因为最近在写工具箱，所以研究了几种搜索功能，找到这款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>