Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.