| 标题 | 仿百度谷歌搜索下拉框 |
| 内容 | 仿百度，谷歌搜索下拉框 以下是代码，代码有待优化，本站原创 查看效果：仿百度谷歌搜索下拉框 <!doctype html public -//w3c//dtd html 4.01 transitional//en > <html> <head> <title>仿百度搜索下拉框，放搜索下拉框，仿谷歌搜索下拉框 原创转载请注明</title> <meta content=仿谷歌百度搜索下来内容显示，可以通过ajax下拉也可以调用数据库数据，目前只是按照js调用了点内容，参考下面代码进行自行修改 name=description> <meta content=谷歌，百度，下拉框，仿搜索下拉，下拉框搜索，搜索下拉内容 name=keywords> <style type=text/css> body{ font-size:14px;} </style> <meta http-equiv=content-type content=text/html; charset=gb2312 /> </head> <script language=javascript src=js/jquery-1.4.4.min.js></script> <script language=javascript> <!-- ///开始定义全局内容 var fouce_li_num = -1;///默认没有选择任何下拉内容 var width_ = 300;//这里设置的是搜索框的宽度，目的为了与下面的列表宽度相同 var li_color = #fff;//默认的下拉背景颜色 var li_color_ = #ccc;//当下拉选项获取焦点后背景颜色 $(function(){ $(input[name=key]).keyup(function(event){ var keycode = event.keycode; if(delkeycode(keycode))return; var key_ = $(this).val();//获取搜索值 var top_ = $(this).offset().top;//获搜索框的顶部位移 var left_ = $(this).offset().left;//获取搜索框的左边位移 ，网站制作学习网原创 if(keycode==13){//enter search if(fouce_li_num>=0){ $(this).val($.trim($(#foraspcn >li:eq(+fouce_li_num+)).text())); fouce_li_num=-1; }else{ /////当没有选中下拉表内容时 则提交form 这里可以自定义提交你的搜索 } $(#foraspcn).hide(); }else if(keycode==40){//单击键盘向下按键 fouce_li_num++; var li_allnum = $(#foraspcn >li).css(background-color,li_color).size(); if(fouce_li_num>=li_allnum&&li_allnum!=0){//当下拉选择不为空时 fouce_li_num=0; }else if(li_allnum==0){fouce_li_num--;return;} $(#foraspcn >li:eq(+fouce_li_num+)).css(background-color,li_color_); }else if(keycode==38){//点击键盘向上按键 fouce_li_num--; var li_allnum = $(#foraspcn >li).css(background-color,li_color).size(); if(fouce_li_num<0&&li_allnum!=0){//当下拉选择不为空时 fouce_li_num=li_allnum-1; }else if(li_allnum==0){fouce_li_num++;return;} $(#foraspcn >li:eq(+fouce_li_num+)).css(background-color,li_color_); }else{//进行数据查询，显示查询结果 fouce_li_num=-1; $(#foraspcn).empty(); ///ajax调用 这里使用的是 测试内容 ajax_demo(); //ajax_getdata(key_);//如果使用ajax去前面的demo和// //赋值完毕后进行显示 $(#foraspcn).show().css({top:top_+22,left:left_}); } }); //当焦点从搜索框内离开则，隐藏层 $(body).click(function(){ $(#foraspcn).hide(); }); ///创建隐藏的div，用来显示搜索下的内容 $(body).append(<div id='foraspcn'></div>); $(#foraspcn).css({width:+width_+px,position:absolute,z-index:999,list-style:none,border:solid #e4e4e4 1px,display:none});//这里设置列下拉层的样式，默认为隐藏的 }); //定义非开始运行函数 function delkeycode(keycode){//去除了不必要的按键反应，当比如删除，f1 f2等按键时，则返回 var array = new array(); array =[8,16,19,20,27,33,34,35,36,45,46,91,112,113,114,115,116,117,118,119,120,121,122,123,145,192]; for(i=0;i<array.length;i++){ if(keycode==array[i]){return true;break;} } return false; } //这是一个测试案例 function ajax_demo(){ var data_array = [网站制作学习网,网站制作,www.anypoetry.com]; for(i=0;i<data_array.length;i++){//这里进行数据附加 返回数据格式为 关键词数组 $(#foraspcn).append(<li style='width:+width_+px;'>+data_array[i]+</li>); } $(#foraspcn >li).mouseover(function(){$(this).css(background-color,li_color_);}); $(#foraspcn >li).mouseout(function(){$(this).css(background-color,li_color);}); $(#foraspcn >li).click(function(){$(input[name=key]).val($.trim($(this).text()));$(this).parent().hide();}); } ////////////////这里是正式的ajax调用 function ajax_getdata(key){ $.post( ajax_tag_search.php, {key:key},//ajax 的post不能提交中文提交，在动作页面进行获取后需要解码，注意字符格式，然后搜索后返回 function(data){//返回格式是json数据，至少是个数组也可自定义，然后再这里进行操作 data_array = eval((+data+)); for(i=0;i<data_array.length;i++)//这里进行数据附加 返回数据格式为 关键词数组 $(#foraspcn).append(<li style='width:+width_+px;'>+data_array[i]+</li>); $(#foraspcn >li).mouseover(function(){$(this).css(background-color,li_color_);}); $(#foraspcn >li).mouseout(function(){$(this).css(background-color,li_color);}); $(#foraspcn >li).click(function(){$(input[name=key]).val($.trim($(this).text()));$(this).parent().hide();}); } ); } --> </script> <body> 仿百度百度搜索下拉<input type=text name=key size=40 maxlength=40> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。