欢迎来到北极熊_北极熊网
帮助中心

北极熊_北极熊网

热门搜索:

如何做一个可输入的下拉框,进行模糊匹配

  • 时间:2020-10-30 13:20 编辑:ord 来源:北极熊 阅读:8
  • 扫一扫,手机访问
摘要:如何做一个可输入的下拉框,进行模糊匹配1.引入jquery2.样式调整3.完整代码如下:在这里插入代码片 ```<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta 

如何做一个可输入的下拉框,进行模糊匹配

1.引入jquery
2.样式调整
3.完整代码如下:

在这里插入代码片
```<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>清城</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style>
        .qcdromodel{width: 500px;margin: 0 auto}
        .qc-dromodel{
            display: none;
        }
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
<section>
    <div class="qcdromodel" style="margin-left: 5%;">
        <select class="" id="industryOf" name="industryOf" onclick="onezs();" style="height: 24px;width: 170px;height: 30px;-moz-appearance: none;pointer-events: none;">
            <option value=""></option>
        </select>
        <input type="text" id="onezs" class="qc-zsearch" onclick="onezs();" style="height: 24px; width: 150px; position: absolute; left: 5%;" readonly="readonly" placeholder="输入相应颜色">
        <ul class="qc-dromodel" id="modedata" style="padding-left: 0px;margin-top: 0px;width: 170px;display: none;margin-left: -7px;">
            <input type="text" id="twoxj" class="qc-search" placeholder="输入相应颜色" style="height: 24px; width: 150px; position: absolute; left: 5%;top: 8px;">
            <ul class="qc-dromodel_1" style="overflow: scroll;height: 300px;background-color: rgb(0, 188, 212);width: 100%;padding-left: 10px;display: block;">
                <li><a href="javascript:;">红色</a></li>
                <li><a href="javascript:;">大红色</a></li>
                <li><a href="javascript:;">水红色</a></li>
                <li><a href="javascript:;">粉红色</a></li>
                <li><a href="javascript:;">黄hyhf色</a></li>
                <li><a href="javascript:;">黄dahjdf色</a></li>
                <li><a href="javascript:;">黄hydadhf色</a></li>
                <li><a href="javascript:;">黄hyshf色</a></li>
                <li><a href="javascript:;">黄h11yhf色</a></li>
                <li><a href="javascript:;">黄hkolhf色</a></li>
                <li><a href="javascript:;">黄hyhf5842色</a></li>
                <li><a href="javascript:;">黄hyh*fsf色</a></li>
                <li><a href="javascript:;">黄hy44hf色</a></li>
                <li><a href="javascript:;">黄hy65hf色</a></li>
                <li><a href="javascript:;">黄色</a></li>
                <li><a href="javascript:;">蓝色</a></li>
                <li><a href="javascript:;">橙色01</a></li>
                <li><a href="javascript:;">橙色02</a></li>
                <li><a href="javascript:;">橙色03</a></li>
                <li><a href="javascript:;">橙色040</a></li>
                <li><a href="javascript:;">橙色05</a></li>
                <li><a href="javascript:;">黑色</a></li>
                <li><a href="javascript:;">黑色B856YTS85R900</a></li>
                <li><a href="javascript:;">白0色</a></li>
                <li><a href="javascript:;">白1色</a></li>
                <li><a href="javascript:;">白2色</a></li>
                <li><a href="javascript:;">白3色</a></li>
                <li><a href="javascript:;">白4色</a></li>
                <li><a href="javascript:;">白5色</a></li>
            </ul>
        </ul>
    </div>
</section>
</body>

<script type="text/javascript">

$(document).ready(function(){
     //点击空白收回下拉框
     $('.wew').click(function () {
        alert(11);
         $('.qc-dromodel').hide();
    });
    //搜索条件查询
    $(".qc-search").on('input propertychange', function () {
        var searchTerm = $(this).val();
        $(this).siblings('.qc-dromodel_1').show();
        $(this).addClass('cli');
        var searchSplit = searchTerm.replace(/ /g, "'):containsi('");
        $.extend($.expr[':'], {
            'containsi': function(elem, i, match, array) {
                return (elem.textContent || elem.innerText || '').toLowerCase()
                    .indexOf((match[3] || "").toLowerCase()) >= 0;
            }
        });
        $(this).siblings('.qc-dromodel_1').find('li').not(":containsi('" + searchSplit + "')").each(function()   {
            $(this).hide();
        });
        $(this).siblings('.qc-dromodel_1').find("li:containsi('" + searchSplit + "')").each(function() {
            $(this).show();
        });
    });
    // input 输入框点击事件
    $('.qcdromodel').on('click', function(e){
        $(".qcdromodel").find("ul").hide();// 让ul隐藏(当你一个页面多个这样的输入框时你就会用到)
        $(this).find('ul').show();// 当前子节点显示
        e.stopPropagation();// 阻止事件冒泡
    });
    // 下拉框里面内容收起
    $('.qc-dromodel li a').on('click', function(e) {
        $("#onezs").css("display","block");
        $("#onezs").css("top","8px");
        $(this).parents('.qc-dromodel').hide().siblings('.qc-zsearch').removeClass('selected').removeClass('cli').val($(this).text());
        e.stopPropagation();// 阻止事件冒泡
    });
});

function onezs() {
    $("#onezs").css("display","none");
}

</script>

</html>


  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【今日头条|头条】微信 Windows 3.1.0 测试版发布:群聊设置备注,聊天列表不显示某个聊天(2020-12-04 23:18)
【今日头条|头条】在 Windows 上刷抖音点外卖,会是种怎样的体验(2020-12-04 23:13)
【今日头条|前沿科技】我国实现量子霸权:九章问世(2020-12-04 22:45)
【今日头条|头条】工信部:我国 1-10 月互联网企业收入 10110 亿元,目前 APP 数量 348 万款(2020-12-03 21:43)
【今日头条|头条】3个神奇又实用的小破站!(2020-12-01 22:47)
【今日头条|头条】微信第 1 行代码曝光!【文末送书】(2020-11-29 21:09)
【今日头条|头条】手机收不到验证码要小心,330万老年机被植入木马(2020-11-28 23:05)
【今日头条|头条】高通骁龙875发布在即,有数码博主已经放出(2020-11-28 23:00)
【今日头条|头条】华为荣耀划清界限,今后要做最强对手(2020-11-27 22:07)
【技术文档|安全】宝塔面板被曝存在删库风险漏洞(2020-11-27 21:40)
联系我们
电话:18936411277
邮箱:1044412291@qq.com
时间:09:00 - 19:00
公众号:北格软件
底部广告