html5搜尋比對怎麼做？-html教學-PHP中文網

首頁

web前端

html教學

html5搜尋比對怎麼做？

May 08, 2019 am 09:27 AM

html html5 搜尋

【HTML5 jquery】實現的搜尋匹配效果，或者說是搜尋過濾，當你在文字方塊輸入一個字元時，如果下邊的列表中有以此為開頭的內容時，就會自動為你顯示相關內容。

html5搜尋比對怎麼做？

範例中僅列出了一些，用時候你可以自己再完善下，程式碼僅為您提供一種思路，希望對你是有幫助的

HTML

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://www.jq22.com/jquery/bootstrap-3.3.4.css&quot;&gt;
&lt;div class=&quot;g-container&quot;&gt; 
    &lt;form action=&quot;&quot; class=&quot;basic-grey&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;lastname&quot; class=&quot;control-label&quot;&gt;
            公司选择:
        &lt;/label&gt;
            &lt;div class=&quot;Companies&quot;&gt;
                &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;请选择&quot; id=&quot;js-groupId&quot;&gt;
                &lt;input type=&quot;hidden&quot; id=&quot;groupId&quot;&gt;
                &lt;ul id=&quot;groupid&quot;&gt;
                    &lt;li data-id=&quot;827&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;厦门集众筹智科技有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;826&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;苏州高新区文体发展有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;825&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;美罗城test&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;824&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;深圳市高收益科技开发有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;823&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;深圳市蜗爱生活科技开发有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;815&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;深圳市宇恒乐便利店管理有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;814&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;广东胜佳超市有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;813&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;顺义李先生说&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;812&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;十足集团股份有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;811&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;宏图三胞高科技术有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;810&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;九州连锁超市公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;809&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;李先生&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;808&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;李先生牛肉面快餐厅&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;807&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;李先生牛肉面快餐厅&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;806&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;美宜佳便利店有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;805&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;上海一嗨汽车租赁有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;804&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;龙湖商业地产（重庆区）&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;803&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;阜阳华联集团股份有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;802&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;百万庄园&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;801&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;百万庄园&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;800&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;上海恭胜酒店管理有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;799&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;北京好伦哥餐饮有限公司&lt;/a&gt;&lt;/li&gt;
                    &lt;li data-id=&quot;798&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;富驿酒店集团有限公司&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;

&lt;/div&gt;

登入後複製

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

登入後複製

js：

jQuery.expr[&#39;:&#39;].Contains = function(a, i, m) {
    return (a.textContent || a.innerText || &quot;&quot;).toUpperCase().indexOf(m[3].toUpperCase()) &gt;= 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(&quot;li&quot;).slideDown();
        }
    });
}
$(function() {
    filterList($(&quot;#groupid&quot;));
    $(&#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()
    });
})

登入後複製

以上是html5搜尋比對怎麼做？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn