原創著作,產權保護 政府、投票、評選、公安、學校、問卷、視頻會議專注發展中小企事業 系統報價 | 支付帳號 | 授權查證
    計算機著作版權登記號:2014SR032463 手機:+86-1373066-4304 | QQ:1213920482 歡迎選擇智睿軟件系統 歡迎選擇智睿軟件系統
智睿軟件系統
HTML5 JS實現下拉列表搜索匹配功能
來源:智!g覽:40 次 發布時間:2020-04-30 10:54:15


<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no" name="format-detection"/>
<title>HTML5 JS實現搜索匹配功能</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
div,li,ul {
	margin:0;
	padding:0;
}
ul li {
	list-style:none;
}
.basic-grey {
	width:600px;
	margin:5% 10%;
}
.basic-grey .Companies {
	position:relative;
}
.basic-grey .Companies ul {
	position:relative;
	height:210px;
	width:100%;
	overflow-y:auto;
	border:1px solid #DDD;
	display:none;
}
.basic-grey .Companies ul li {
	padding:3px 12px;
}
.basic-grey .Companies ul li:hover {
	background-color:#bebebe;
	cursor:pointer;
}
.basic-grey .Companies ul li.top {
	position:absolute;
	top:0;
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" >
<%
Response.Write(Request("groupId"))
%>
<div class="g-container"> 
    <form action="" class="basic-grey" method="post">
        <div class="form-group">
            <label for="lastname" class="control-label">
            公司選擇:
        </label>
            <div class="Companies">
                <input class="form-control" type="text" placeholder="請選擇" id="js-groupId">
                <input type="hidden" id="groupId" name="groupId"> 
                <ul id="groupid">
                    <li data-id="827"><a href="javascript:void(0)">廈門集眾籌智科技有限公司</a></li>
                    <li data-id="826"><a href="javascript:void(0)">蘇州高新區文體發展有限公司</a></li>
                    <li data-id="825"><a href="javascript:void(0)">美羅城test</a></li>
                    <li data-id="824"><a href="javascript:void(0)">深圳市高收益科技開發有限公司</a></li>
                    <li data-id="823"><a href="javascript:void(0)">深圳市蝸愛生活科技開發有限公司</a></li>
                    <li data-id="815"><a href="javascript:void(0)">深圳市宇恒樂便利店管理有限公司</a></li>
                    <li data-id="814"><a href="javascript:void(0)">廣東勝佳超市有限公司</a></li>
                    <li data-id="813"><a href="javascript:void(0)">順義李先生說</a></li>
                    <li data-id="812"><a href="javascript:void(0)">十足集團股份有限公司</a></li>
                    <li data-id="811"><a href="javascript:void(0)">宏圖三胞高科技術有限公司</a></li>
                    <li data-id="810"><a href="javascript:void(0)">九州連鎖超市公司</a></li>
                    <li data-id="809"><a href="javascript:void(0)">李先生</a></li>
                    <li data-id="808"><a href="javascript:void(0)">李先生牛肉面快餐廳</a></li>
                    <li data-id="807"><a href="javascript:void(0)">李先生牛肉面快餐廳</a></li>
                    <li data-id="806"><a href="javascript:void(0)">美宜佳便利店有限公司</a></li>
                    <li data-id="805"><a href="javascript:void(0)">上海一嗨汽車租賃有限公司</a></li>
                    <li data-id="804"><a href="javascript:void(0)">龍湖商業地產(重慶區)</a></li>
                    <li data-id="803"><a href="javascript:void(0)">阜陽華聯集團股份有限公司</a></li>
                    <li data-id="802"><a href="javascript:void(0)">百萬莊園</a></li>
                    <li data-id="801"><a href="javascript:void(0)">百萬莊園</a></li>
                    <li data-id="800"><a href="javascript:void(0)">上海恭勝酒店管理有限公司</a></li>
                    <li data-id="799"><a href="javascript:void(0)">北京好倫哥餐飲有限公司</a></li>
                    <li data-id="798"><a href="javascript:void(0)">富驛酒店集團有限公司</a></li>
                </ul>
            </div>
        </div>
		<input name="baidu" type="submit" value="提交">
    </form>

</div>

<script>
jQuery.expr[':'].Contains = function(a, i, m) {
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

function filterList(list) {
    $('#js-groupId').bind('input propertychange', function() {
        var filter = $(this).val();
        if (filter) {
            $matches = $(list).find('a:Contains(' + filter + ')').parent();
            $('li', list).not($matches).slideUp();
            $matches.slideDown();
        } else {
            $(list).find("li").slideDown();
        }
    });
}
$(function() {
    filterList($("#groupid"));
    $('#js-groupId').bind('focus', function() {
        $('#groupid').slideDown();
    }).bind('blur', function() {
        $('#groupid').slideUp();
    })
    $('#groupid').on('click', 'li', function() {
        $('#js-groupId').val($(this).text())
        $('#groupId').val($(this).data('id'))
        $('#groupid').slideUp()
    });
})
</script>

</body>
</html>


下載地址:鏈接: https://pan.baidu.com/s/1xNcBZmAyKEx2wZl0Gje0BQ 提取碼: j8b1

好網址:http://www.jq22.com/

【刷新頁面】【加入收藏】【打印此文】 【關閉窗口】
上一篇:智睿中小學生學籍信息管理系統 V 3.6.0 學生信息管理系統 下一篇:JS常用的獲取值和設值的方法
股市行情大盘分析