jquery+bootstrap模糊查询的下拉选择框效果代码-html代码-BFW代码库

jquery+bootstrap模糊查询的下拉选择框效果代码

代码语言：html

代码描述：jquery+bootstrap模糊查询的下拉选择框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.3.3.7.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.7.css">
<style>
    .box {
    margin: 0px auto;
    width: 500px;
    margin-top: 70px;
}
* {
    margin: 0;
    padding: 0;
}
em {
    font-style: normal;
}
.dropdown {
    width: 300px;
}
.dropdown button {
    width: 100%;
    text-align: left;
    border: solid 1px #e1e1e1;
    background: #fff !important;
    border-radius: 3px;
    height: 32px;
}
.dropdown button i {
    float: right;
    margin-top: 8px;
}
.dropdown ul {
    width: 100%;
}
.dropdown ul input {
    height: 25px;
    padding: 3px 10px;
    border: 1px solid #ccc;
    border-radius: 15px;
    width: 100%;
}
.dropdown-menu li:first-child {
    position: relative;
    padding: 5px 10px;
}
.dropdown-menu li:first-child i {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 10px;
}
</style>

</head>
<body>

	<div class="box">
		<h4>下拉模糊查询</h4>
		
		<div class="dropdown custom1">
			<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
				<em>请选择</em>
				<i class="caret"></i>
			</button>
			<ul class="dropdown-menu">
				<li >
					<input class="form-control seach_name" placeholder="请输入搜索内容"/>
					<i class="glyphicon glyphicon-search"></i>
				</li>
				<li data = "bfw"><a>bfw<.........完整代码请登录后点击上方下载按钮下载查看