jquery实现手机端弹出下拉选择及搜索效果代码-html代码-BFW代码库

jquery实现手机端弹出下拉选择及搜索效果代码

代码语言：html

代码描述：jquery实现手机端弹出下拉选择及搜索效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



    <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0" />



<style>
    @charset "utf-8";
.seach_name {
	display: block;
	font-size: 0.24rem;
	color: #666;
	border: 1px solid #e0e0e0;
	padding: 0.2rem 0.2rem;
	width: 88%;
	margin: 0.2rem auto;
	border-radius: 4px;
}

#mymodal {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 1rem;
	background-color: rgba(0, 0, 0, .6);
	display: none;
	z-index: 9999;
}

.modal-main {
	position: fixed;
	bottom: -900px;
	left: 0;
	height: 75%;
	width: 100%;
	background-color: #fff;
	font-size: .22rem;
	/*	margin-bottom: 0.3rem;*/
}

.address-title {
	font-size: 0.26rem;
	text-align: center;
	padding: 0.2rem 0;
	color: #222;
	border-bottom: 1px solid #EFEFEF;
	display: flex;
}

.address-title .cancel {
	color: #666;
}

.address-title .ensure {
	color: #1e83d3;
}

.address-title .title {
	font-weight: 700;
	flex: 2;
}

.close {
	position: absolute;
	padding: 0.05rem 0.25rem;
	right: 0rem;
	top: 0rem;
	color: #9a9da7;
	font-size: 0.5rem;
}

.optionwrapper {
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	padding-left: .2rem;
	height: .6rem;
	box-sizing: border-box;
}

.active-option {
	border-bottom: 1px solid #FF2440;
}

.option-content {
	position: absolute;
	top: 0.8rem;
	left: 0;
	right: 0;
	bottom: 0;
}

.option-group {
	display: none;
	overflow: auto;
	height: 100%;
	border-top: 1px solid #EFEFEF;
	padding: 0 .3rem;
}

.option-list {
	padding: .2rem .2rem;
	display: flex;
	border-bottom: 1px solid #efefef;
}

.checked {
	width: .15rem;
	height: .15rem;
	background-color: #FF304A;
	display: inline-block;
	margin-left: .2rem;
	border-radius: 50%;
	display: none;
	margin-top: .1rem;
}
</style>
	
</head>

<body>
    <form action="" style="display: flex;justify-content:center;">
        <input type="text" id="project" placeholder="请选择科目名称" onFocus="this.blur()" style="width: 80%;
        height: 50px;
        border: 1px solid #ccc;
        border-radius: 5px;
        line-height: 50px;
        margin: 50px auto;
        text-align: center;
        font-size: 20px;
    }">
    </form>

    <!-- 模板 -->
    <script type="text/html" id="script_cus_select">
        <section id="mymodal">
            <div class="modal-main">
                <div class="fixWidth address-title" style="display: flex;text-align: center;">
                    <div class="cancel" style="flex:1;">取消</div>
                    <div class="title" style="flex:2;">${title}</div>
                    <div class="ensure" style="flex:1;">确认</div>
                </div>
    
                <div class="option-content">
                    <input class="seach_name" placeholder="请输入搜索名称"/>
                    <ul class="option-group option-group-one" data-index="0" style="display: block"></ul>
                </div>
            </div>
        </section>
    </script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>



    <script type="text/javascript">
    (function (doc, win) {
    //  html
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            clientWidth = (clientWidth > 768 ) ? 768 : clientWidth ; docEl.style.fontSize = clientWidth / 7.5 + 'px';
        };
    if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false);
    recalc();
})(document, window);
        cusSelect('project', {
            .........完整代码请登录后点击上方下载按钮下载查看