使用select2实现下拉列表动态模糊查询

CHH2177094

已于 2023-09-28 14:37:04 修改

阅读量636

点赞数

分类专栏：前端文章标签： html javascript

于 2023-09-28 14:29:15 首次发布

本文链接：https://blog.csdn.net/CHH2177094/article/details/133383300

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

select2的官方文档:https://select2.github.io

最终实现效果:

点击下拉框，出现输入框以及下拉列表，在输入框中输入文字(英文不区分大小写)，则可对下拉列表进行搜索、选择：

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" ></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" ></script>
    <style>
        
    </style>
    <body>
        <div>
            <select class="singleSelect" style="width: 200px;">
                <option value="">--请选择--</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="henan">河南</option>
                <option value="hunan">湖南</option>
                <option value="hubei">湖北</option>
                <option value="guangdong">广东</option>
            </select>
 
        </div>
            <script type="text/javascript">
 
        $(document).ready(function() {
                $('.singleSelect').select2();
 
            });
 
        </script>
    </body>
</html>