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

代码语言：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', {
            title: '选择科目',
            data: [
                { text: '科目-1', id: 1 },
                { text: '科目-2', id: 2 },
                { text: '科目-3', id: 3 },
                { text: '科目-4', id: 4 },
                { text: '科目-5', id: 5 },
                { text: '科目-6', id: 6 },
                { text: '科目-7', id: 7 },
                { text: '科目-8', id: 8 },
                { text: '科目-9', id: 9 },
                { text: '科目-10', id: 10 }
            ],
            callback: function (data) {
                $("#project").val(data.text);
                $("#project").parent().find('[name=project_id]').remove();
                $("#project").parent().append(`<input type="hidden" name="project_id" value="${data.id}" />`);
            }
        }).init();

        /**
        * 自定义下来狂
        * @param option
        */
        function cusSelect(eleId, config = {}) {
            let option = Object.assign({}, {
                title: '学校',
                selectTag: '',
                multi: false,//多选
                searchAjax: false,//搜索是否异步，请写异步获取数据方法
                selectFun: function () { },
                callback: function () { }
            }, config || {}), tplData = { title: option.title }, tpl = $("#script_cus_select").html();

            /**
             * 初始化
             */
            const init = function () {
                //初始化模板
                let tplc = tpl.replace(/\$\{(.*?)\}/i, function (match, $1) {
                    return tplData[$1];
                });
                option.selectTag = `cusSelect_${eleId}`;
                $('#' + option.selectTag).remove();
                $('body').append(`<div id="${option.selectTag}">${tplc}</div>`);

                initData(option.data || []);
                bindEvent();
            };

            /**
             * 初始化数据
             */
            const initData = function (data .........完整代码请登录后点击上方下载按钮下载查看