autoComplete代码实现 --类似Google下搜索提示

使用google搜索的时候,我们会发现他有一个很人性化的东西,就是搜索智能提示,英文名字叫:autoComplete,如图

 

于是我也手痒痒,想整一个,时尚时尚是一方面,最主要还是为了用户好,用户是上帝嘛,不过小弟我js偏弱,于是我用很笨的办法实现了一个,firefox下还不支持,下面是代码,请各位高手指点,以下代码直接保存成html可以看见效果

 

1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
2 < HTML >
3 < HEAD >
4 < TITLE > New Document </ TITLE >
5 < META NAME ="Generator" CONTENT ="EditPlus" >
6 < META NAME ="Author" CONTENT ="" >
7 < META NAME ="Keywords" CONTENT ="" >
8 < META NAME ="Description" CONTENT ="" >
9 < style >
10#ul1{width:360px;border:1px solid #A2A2A2; background-color:#f1f9fe;z-index:3; padding:0 0 0 2px; }
11#ul1 li{width:360px; list-style-type:none; margin-bottom:2px; padding:0px;}
12.leftspan{
13float:left; font-weight:normal; font-size:11px;
14}

15.rightspan{
16float:right;font-weight:normal;font-size:10px; color:Green;
17}

18
</ style >
19 </ HEAD >
20
21 < BODY >
22 < script language ="javascript" >
23 var k='在这里输入文字';
24 document.write('<ul id="ul1" style="display:none;position:absolute;"></ul><form id="frmhead" name="frmhead" οnsubmit="javascript:return subcheck()" action="/Search.aspx" method="get" ><li style="width:400px !important;width:300px;"><input id="k" size="69" maxlength="80" autocomplete="off" name="k" class="kind_textbox_search_border" οnkeyup="keyup1();" οnblur="if (this.value == /'/') {this.value = /'赶快体验强劲视频搜索!/';};$(/'ul1/').style.display = /'none/';" οnfοcus="if (this.value == /'赶快体验强劲视频搜索!/') {this.value = /'/';}" value="'+k+'" /><input type="submit" value=" 立即搜索 " class="btnval" /></form><li><a οnclick="this.style.behavior=/'url(#default#homepage)/';this.setHomePage(/'http://www.svnhost.cn/');" href="#">设为首页</a>');
25var selectIndex = -1;
26var lastObject = null;
27var lastValue = '';
28var globalViewstr = "";
29var yobj = new ActiveXObject("Scripting.Dictionary");
30var gtag = 1;
31var avg = new Object();
32function closediv(obj){$(obj).style.display = "none";}
33function showdiv(obj){$(obj).style.display = "block";}
34String.prototype.trim = function(){ return this.replace(/(^[/s]*)|([/s]*$)/g, ""); }
35function $() {var elements = new Array(); for (var i = 0; i < arguments.length; i++) {
36 var element = arguments[i];
37 if (typeof element == 'string')
38 element = document.getElementById(element);
39 if (arguments.length == 1)
40 return element;
41 elements.push(element);}

42 return elements;}

43function $F(obj){return $(obj).value;}
44function submitit(){closediv('ul1');}
45function mouseoverz1()
46{
47 var e = event || window.event;
48 selectIndex = parseInt(e.srcElement.getAttribute('index'));
49 UpdateSelected();
50}

51function subcheck()
52{
53 if($F('k').trim()=='' || $F('k').trim()=='赶快体验强劲视频搜索!')
54 {
55 $('k').focus();
56 return false;
57 }

58 frmgiveValue();
59 return true;
60}

61function btncsave()
62{
63 if($F('k').trim()=='' || $F('k').trim()=='赶快体验强劲视频搜索!')
64 {
65 $('k').focus();
66 return;
67 }

68 else
69 {
70 document.frmhead.submit();
71 }

72}

73function writecontentv1()
74{
75 if(selectIndex!=-1&&$('ul1').style.display != "none")
76 {
77 var o = $('ul1').childNodes[selectIndex];
78 $('k').value = o.childNodes[0].innerHTML;
79 }

80}

81function gvShow(globalViewstr)
82{var doubleit = globalViewstr.split("&8&8&");
83 SendResult("qq", doubleit[0].split(

 

下图是执行效果,请各位高手指点
 

 代码打包下载 http://www.svnhost.cn/Download/Detail-41.shtml

 好东西,存档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值