How to realize the effect of search and matching by html5
Most people do not understand the knowledge points of this article "html5 how to achieve search matching effect", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "html5 how to achieve search matching effect" article.
The search matching effect, or search filtering, implemented by HTML5+jquery, when you enter a character in the text box, will automatically display the relevant content for you if there is anything that begins with it in the list below.
Only a few are listed in the example. When you use it, you can refine it by yourself. The code only provides you with a way of thinking. I hope it is helpful to you.
HTML
The company chooses:
Xiamen Jizhong Intelligence Technology Co., Ltd.
Suzhou High-tech Zone Sports Development Co., Ltd.
Test of Metro City
Shenzhen High profit Technology Development Co., Ltd.
Shenzhen Snail Love Life Technology Development Co., Ltd.
Shenzhen Yu Hengle convenience Store Management Co., Ltd.
Guangdong Shengjia supermarket Co., Ltd.
Mr. Li Shunyi said
Shijiu group co., Ltd.
Hongtu Sanqi Hi-Tech Co., Ltd.
Kyushu chain supermarket co., Ltd.
Mr. Li
Mr. Li Beef Noodle Restaurant
Mr. Li Beef Noodle Restaurant
Meiyijia convenience store Ltd.
Shanghai Yihi car Rental Co., Ltd.
Longhu Commercial Real Estate (Chongqing District)
Fuyang Hualian Group Co., Ltd.
Million Manor
Million Manor
Shanghai Gongsheng Hotel Management Co., Ltd.
Beijing Haolunge Catering Co., Ltd.
Fuyi Hotel Group Co., Ltd.
CSS:
Div,li,ul {
Margin:0
Padding:0
}
Ulli {
List-style:none
}
. basic-grey {
Width:600px
Margin:5%
}
. basic-grey.Companies {
Position:relative
}
. basic-grey.Companiesul {
Position:relative
Height:210px
Width:100%
Overflow-y:auto
Border:1pxsolid#DDD
Display:none
}
. basic-grey.Companiesulli {
Padding:3px12px
}
. basic-grey.Companiesulli:hover {
Background-color:#bebebe
Cursor:pointer
}
. basic-grey.Companiesulli.top {
Position:absolute
Top:0
}
Js:
JQuery.expr [':'] .Conception = function (a _ m) {
Return (a.textContent | | a.innerText | | ") .toUpperCase () .indexOf (m [3] .toUpperCase ()) > = 0
}
FunctionfilterList (list) {
$('# js-groupId'). Bind ('inputpropertychange',function () {
Varfilter=$ (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 ()
})
The above is about the content of this article on "how to achieve search matching results in html5". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.
