仿百度谷歌搜索下拉框

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

仿百度谷歌搜索下拉框

来源：易贤网阅读：990 次日期：2016-06-22 09:42:44

温馨提示：易贤网小编为您整理了“仿百度谷歌搜索下拉框”,方便广大网友查阅！

仿百度，谷歌搜索下拉框以下是代码，代码有待优化，本站原创

查看效果：仿百度谷歌搜索下拉框

<!doctype html public -//w3c//dtd html 4.01 transitional//en >

<html>

<head>

<title>仿百度搜索下拉框，放搜索下拉框，仿谷歌搜索下拉框原创转载请注明</title>

body{

font-size:14px;}

</style>

</head>

<!--

///开始定义全局内容

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>

上一篇：js操作下拉框

下一篇：oracle对于死锁的处理方法

易贤网手机网站地址：仿百度谷歌搜索下拉框

由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！