问题:一个老系统,让把所有jsp页面动态生成的<select>下拉选,选项过多的下拉选全部改为支持模糊搜索的下拉选的功能。系统框架只有 jq 和layui(仅用于列表和弹窗),
JQurey
首先想到的就是jQuery UI API – 自动完成部件(Autocomplete Widget) | 菜鸟教程
代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>自动完成部件(Autocomplete Widget)演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<label for="autocomplete">选择一个编程语言:</label>
<input id="autocomplete">
<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});
</script>
</body>
</html>
如果一个查询页面有三个要改的下拉选,这个方式就需要在代码页面插入3块js脚本,前端看了直摇头,而且查询参数都是通过表单提交,没有id只有name,还需要额外在绑定id。手动实现码值映射等等。
Layui
然后再看系统有的这个layui框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>镜像站@Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://layui.wc-os.com/res.layui.com/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">搜索选择框</label>
<div class="layui-input-inline">
<select name="modules" lay-verify="required" lay-search="">
<option value="">直接选择或搜索选择</option>
<option value="1">layer</option>
<option value="2">form</option>
<option value="3">layim</option>
<option value="4">element</option>
<option value="5">laytpl</option>
<option value="6">upload</option>
<option value="7">laydate</option>
<option value="8">laypage</option>
<option value="9">flow</option>
<option value="10">util</option>
<option value="11">code</option>
<option value="12">tree</option>
<option value="13">layedit</option>
<option value="14">nav</option>
<option value="15">tab</option>
<option value="16">table</option>
<option value="17">select</option>
<option value="18">checkbox</option>
<option value="19">switch</option>
<option value="20">radio</option>
</select>
</div>
</div>
</div>
</form>
<script src="https://layui.wc-os.com/res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
</body>
</html>
这个layui本人不太会用,这个效果需要从表单开始,加上一层层的class才能生效,搬到页面上一个是破坏布局,另一个风格和当前系统不太适配。
于是乎,简单构思了一下,决定动手做一个。