How to do search matching in html5?-HTML Tutorial-php.cn

How to do search matching in html5?

little bottle

Release： 2020-09-14 17:37:02

Original

3949 people have browsed it

【HTML5 jquery】The search matching effect, or search filtering, when you enter a character in the text box, if there is content starting with this in the list below, it will automatically be used for you Show related content.

How to do search matching in html5?

Only some examples are listed. You can improve it yourself when you use it. The code only provides you with an idea. I hope it will be helpful to you.

HTML

<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
<div class="g-container"> 
    <form action="" class="basic-grey">
        <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">
                <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>
    </form>

</div>

Copy after login

CSS:

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;
}

Copy after login

js:

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

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

Copy after login

The above is the detailed content of How to do search matching in html5?. For more information, please follow other related articles on the PHP Chinese website!