Home > Developer > Web Develop
JS implementation similar to Baidu Lenovo input, automatic completion function
Programme one:
Search is the searching box id= "Search"
1 //Click the page to hide the auto-fill prompt box2Document.onclick =function(e) {3 varE = e?e:window.event;4 vartar = E.srcelement | |E.target;5 if(Tar.id! =search) {6 if($ ("#" + Auto). Is (": Visible")) {7$ ("#" + Auto). CSS ("display", "none")8 }9 }Ten}
Scenario Two:
me.tempids=[' AA ', ' BB ', ' cc '];
1 //bind the Mousedowm event to remove the smart cue box2$ (document). Bind (' MouseDown ',function(event) {3 varE = e?e:window.event;4 vartar = E.srcelement | |E.target;5 if(Tar.id = =NULL|| $.inarray (tar.id, me.tempids) = = '-1 ') {6Jo.find ('. Producttype_hint ')). Remove ();7 }8});
Programme III:
Using the jquery plugin:
Introduced:
<style type= "text/css" src= "Js/jquery.bigautocomplete.css" ></style>
<script src= "Js/jquery-1.8.2.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.bigautocomplete.js" type= "Text/javascript" ></script>
1<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">234<title></title>5<meta charset= "Utf-8" >6<style type= "Text/css" src= "Js/jquery.bigautocomplete.css" ></style>7<script src= "Js/jquery-1.8.2.js" type= "Text/javascript" ></script>8<script src= "Js/jquery.bigautocomplete.js" type= "Text/javascript" ></script>9<style type= "Text/css" >Ten One</style> A<script type= "Text/javascript" > -$(function(){ - the$ ("#test"). Bigautocomplete ({ -width:300, -Data:[{title: "China good Voice", Result:{ff: "QQ"}}, -{title: "China Mobile online Business Office"}, +{title: "Bank of China"}, -{title: "China Mobile"}, +{title: "The third issue of good Chinese voice"}, A{title: "China Good sound first phase"}, at{title: "China Telecom online Business Hall"}, -{title: "ICBC"}, -{title: "China Good sound second phase"}, -{title: "Map of China"}], -Callbackfunction(data) { - //alert (data.title); in } - }); to + }) -</script> the *<body> $<div>Panax Notoginseng<input id= "Test" type= "text" value= "" class= "text"/> -</div> the</body> +Programme V:
If the HTML structure is simple, just find the outermost div and trigger the Click event;
There is nothing to be done, only unexpected.
-----ZLP
JS implementation similar to Baidu Lenovo input, automatic completion function
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
