js 实现类似百度联想输入，自动补全功能
方案一：
search是搜索框id="search"
1 //点击页面隐藏自动补全提示框 2 document.onclick = function (e) { 3 var e = e ? e : window.event; 4 var tar = e.srcElement || e.target; 5 if (tar.id != search) { 6 if ($("#" + auto).is(":visible")) { 7 $("#" + auto).css("display", "none") 8 } 9 } 10 }
方案二：
me.tempIds=['aa','bb','cc'];
1 //绑定mousedowm事件，来移除智能提示框 2 $(document).bind('mousedown',function (event) { 3 var e = e ? e : window.event; 4 var tar = e.srcElement || e.target; 5 if (tar.id == null || $.inArray(tar.id, me.tempIds) == '-1') { 6 jo.find('.productType_hint').remove(); 7 } 8 });
方案三：
使用jquery插件：
引入：
<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"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <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"> 10 11 </style> 12 <script type="text/javascript"> 13 $(function(){ 14 15 $("#test").bigAutocomplete({ 16 300, 17 data:[{title:"中国好声音",result:{ff:"qq"}}, 18 {title:"中国移动网上营业厅"}, 19 {title:"中国银行"}, 20 {title:"中国移动"}, 21 {title:"中国好声音第三期"}, 22 {title:"中国好声音 第一期"}, 23 {title:"中国电信网上营业厅"}, 24 {title:"中国工商银行"}, 25 {title:"中国好声音第二期"}, 26 {title:"中国地图"}], 27 callback:function(data){ 28 // alert(data.title); 29 } 30 }); 31 32 }) 33 </script> 34 </head> 35 <body> 36 <div> 37 <input id="test" type="text" value="" class="text"/> 38 </div> 39 </body> 40 </html>
方案五：
如果html结构简单，只需找到最外层div，然后触发click事件；
没有做不到，只有想不到。
-----zlp