jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
本文实例讲述了jQuery实现的仿百度,仿谷歌搜索下拉框效果。分享给大家供大家参考,具体如下:
运行效果图如下:
完整实例代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <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=utf-8" /> </head> <script src="jquery-1.7.2.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.jb51.net"]; 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>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
赞 (0)