js插件-模糊搜索、自动补全下拉框

news2024/11/25 9:36:01

问题：一个老系统，让把所有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框架

镜像站@表单 - 在线演示 - 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才能生效，搬到页面上一个是破坏布局，另一个风格和当前系统不太适配。

于是乎，简单构思了一下，决定动手做一个。