使⽤layuibootstrap实现input标签下拉带搜索功能实现input标签下拉带搜索功能
⽅法⼀：使⽤ bootstrap
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap 搜索下拉框</title>
<!-- jquery 项⽬已有就⽆需再引⼊-->
<script src="/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<!-- bootstrap 项⽬已有 bootstrap就⽆需再引⼊-->
<link href="/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="/twitter-bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<!-- bootstrap-select -->
<link rel="stylesheet" href="cdnjs.cloudflare/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="cdnjs.cloudflare/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<style>
.bootstrap-select.form-control:not([class*=col-]){width: 200px;}
.bs-actionsbox, .bs-donebutton, .bs-searchbox{padding: 2px;}
</style>
</head>
<body>
<select class="selectpicker show-tick form-control" data-live-search="true">
<option>四川(sichuan)</option>
<option>湖南(hunan)</option>
<option>湖北(hubei)</option>
<option>⼴东(guangdong)</option>
<option>北京(beijing)</option>
<option>河南(henan)</option>
</select>
</body>
⽅法⼆：layui
layui的库⽆法在线调⽤，需要下载后，从本地加载
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./static/layui/css/layui.css">
<style>
.layui-form-item{ width: 300px;}
</style>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required" lay-search>
<option value=""></option>
<option value="0">成都</option>
<option value="1">武汉</option>
<option value="2">长沙</option>
<option value="3">合肥</option>
<option value="4">郑州</option>
</select>
</div>
</div>
</form>
</body>
<script src="./static/layui/layui.js"></script>
<script type="text/javascript" src="apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>  <script type="text/javascript">
layui.use('form', function(){
var form = layui.form;
var $ = layui.$;
//每次渲染之后⼿注册事件
$("dl").prev().find("input").attr("onkeydown","listenSelect.up(event,this)");
});
</script>
在项⽬中使⽤ layui
<td>状态</td>
<td>
<div class="layui-form ">
<select name="city" lay-verify="required" lay-search>      <option value="">请选择</option>
<option value="0" >未付款wfk</option>
<option value="1" >已付款yfk</option>
<option value="2" >未确认</option>
<option value="3" >已确认yqr</option>
<option value="4" >已发货</option>
<option value="5" >部分发货</option>
<option value="6" >已收件</option>
<option value="7" >已换货</option>
<option value="8" >已退款</option>
<option value="9" >已退货退款</option>
<option value="10" >交易关闭</option>
<option value="11" >交易成功</option>
</select>
</div>
</td>
<script src="/public/static/jquery.min.js"></script>
<script src="/public/static/layui/layui.js"></script>
<script>
onpaste不能用inputlayui.use('form', function(){
var form = layui.form;
var $ = layui.$;
});
</script>
⽅法四：
引⼊ layui插件 实现
index.html
<script src="layui/layui.js"></script>
<form action="" method="post">
<div class="layui-form">
<select name="abc" id="" lay-search="">
<option></option>
<option>abc</Doption>
<option>ace</option>
<option>axb</option>
<option>azz</option>
</select>
</div>
</form>
<script>
layui.use(['form', 'element'], function(){
var form = layui.form,
element = layui.element;
})
</script>
⽅法五：
不使⽤任何框架
此⽅法不⽀持所有浏览器
<p>
<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion">    <datalist id="mySuggestion">
<option>Blackberry</option>
<option>Blueberry</option>
<option>Lemon</option>
<option>Orange</option>
<option>Pear</option>
<option>Watermelon</option>
</datalist>
</p>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。