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 width: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
时间： 2024-08-02 23:02:42