jQuery实现的仿百度,仿谷歌搜索下拉框效果示例


Posted in Javascript onDecember 30, 2016

本文实例讲述了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 = ["网站制作学习网","网站制作","3water.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>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
原生JS实现图片左右轮播
Dec 30 #Javascript
零基础轻松学JavaScript闭包
Dec 30 #Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 #Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 #Javascript
bootstrap表格分页实例讲解
Dec 30 #Javascript
js中数组的常用方法小结
Dec 30 #Javascript
原生js实现可爱糖果数字时间特效
Dec 30 #Javascript
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php PDO异常处理详解
2016/11/20 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
python中global用法实例分析
2015/04/30 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
Python类的继承super相关原理解析
2020/10/22 Python
python中的列表和元组区别分析
2020/12/30 Python
史学专业毕业生求职信
2014/05/09 职场文书
会议室标语
2014/06/21 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
python实现过滤敏感词
2021/05/08 Python
python中if和elif的区别介绍
2021/11/07 Python