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 相关文章推荐
jquery 按键盘上的enter事件
May 11 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
JavaScript File分段上传
Mar 10 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php实现encode64编码类实例
2015/03/24 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
js电话号码验证方法
2015/09/28 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
Python解析nginx日志文件
2015/05/11 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
关于Python-faker的函数效果一览
2019/11/28 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Python 爬虫性能相关总结
2020/08/03 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
人力资源专业推荐信
2013/11/29 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS