HTML下拉搜索，select筛选搜索

小百菜

已于 2022-06-24 17:16:04 修改

阅读量1.2w

点赞数 4

分类专栏： Javascript 文章标签：下拉搜索，select筛选搜索下拉搜索 select筛选搜索 HTML下拉

于 2021-07-07 18:25:21 首次发布

本文链接：https://blog.csdn.net/u014644574/article/details/118554271

版权

Javascript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

html5 自带搜索功能

 <input list="browsers" name="xzcid">
 <datalist id="browsers">
   <option  value="1">张晓红</option>
   <option  value="2">陈明</option>
   <option  value="3">周瑜</option>
 </datalist>

jQuery实现下拉搜索

点击输入框显示所有option
option选项可滚动，已隐藏滚动条
输入框动态监听并筛选option

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>下拉搜索</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>
        .iput {
            height: 25px;
            width: 200px;
            padding-left: 5px;
        }

        .iop {
            height: 25px;
            margin-left: 5px;
        }

        .iop:hover {
            background-color: #1E90FF;
        }

        .op-list {
            border: solid 1px #767676;
            width: 209px;
            height: 125px;
            overflow-y: auto;
        }

        ::-webkit-scrollbar {
            /*隐藏滚轮*/
            display: none;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div><input class="iput" placeholder="请点击或输入搜索字段..." onclick="showOption()" oninput="search(this.value)"
            onporpertychange="search(this.value)" onchange="search(this.value)"></div>
    <div class="op-list hidden">
        <div class="iop">--请选择--</div>
        <div class="iop">测试1</div>
        <div class="iop">测试2</div>
        <div class="iop">测试3</div>
        <div class="iop">测试4</div>
        <div class="iop">测试5</div>
        <div class="iop">测试6</div>
        <div class="iop">测试7</div>
        <div class="iop">测试8</div>
        <div class="iop">测试9</div>
    </div>
    <script>
        function showOption() {
            $('.op-list').toggleClass('hidden');
            $('.iop').show();
        }
        $(document).on('click', '.iop', function () {
            $('.op-list').addClass('hidden');
            var text = $(this).text();
            $('.iput').val(text);
        })
        function search(value) {
            $('.iop').show();
            $('.iop').each(function () {
                var text = $(this).text();
                if (text.indexOf(value) == -1) {
                    $(this).hide();
                }
            });
        }
        $(document).click(function (e) {
            if ('iput' != e.target.className) {
                $('.op-list').addClass('hidden');
            }
        });

    </script>
</body>

</html>

小百菜

关注

4
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
HTML下拉搜索，select筛选搜索

jQuery实现下拉搜索点击输入框显示所有option option选项可滚动，已隐藏滚动条输入框动态监听并筛选option<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>下拉搜索</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.m
复制链接

扫一扫

专栏目录