Home > Developer > Web Develop
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Search Box Test Demo</title> <style>. Searchdiv{width:400px;Height:400px;margin:150px Auto;}. on{font-size:12px;Font-weight: the;Color:Red;} /*Hide Phonetic Labels*/P{Display:None;} </style> <Scripttype= "text/javascript"src=".. /asset/js/jquery-3.2.1.min.js "></Script> <Scripttype= "text/javascript"> $(function(){ //perform when keyboard keys bounce $('#index'). KeyUp (function(){ varIndex=$.trim ($ ('#index'). val (). toString ()); //Remove two spaces if(index== "'){ //If the search box is entered as empty $('Li'). Removeclass (' on'); return false; } varParent= $('ul'); $('Li'). Removeclass (' on'); //Select all Plus focus class styles that contain text box values and move it to the front of the UL //the Prependto () Method inserts the specified content at the beginning of the selected element (still Inside) //contains selector, Select the element containing the specified string $("li:contains ('"+Index+"')"). prependto (parent). addclass (' on'); $("p:contains ('"+Index+"')"). Parent (). prependto (parent). addclass (' on'); }); }); </Script></Head><Body> <Divclass= "searchdiv">I want to search:<inputtype= "text"ID= "index"/> <ul> <Li>Zhengzhou's Man-mo<P>Zzdww</P></Li> <Li>I'm from Xinxiang.<P>Wlzxxs</P></Li> <Li>My alma mater is Zhongyuan Institute of Technology<P>Wdmxszygxy</P></Li> <Li>My name Zheng Bin.<P>Wjzb</P></Li> <Li>Christina 22<P>Fl22</P></Li> </ul> </Div></Body></HTML>Attention
Using the JQuery provided: contains selector, details reference: http://www.w3school.com.cn/jquery/selector_contains.asp
post-optimization, the first letter of the search title should be generated by the background program, detailed reference: http://blog.csdn.net/chunlongyuan/article/details/8514147
jquery for front-end fuzzy matching and First-letter search
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
