仿百度,谷歌搜索下拉框 以下是代码,代码有待优化,本站原创
查看效果:仿百度谷歌搜索下拉框
<!doctype html public -//w3c//dtd html 4.01 transitional//en >
<html>
<head>
<title>仿百度搜索下拉框,放搜索下拉框,仿谷歌搜索下拉框 原创转载请注明</title>
<meta name="description" content="仿谷歌百度搜索下来内容显示,可以通过ajax下拉也可以调用数据库数据,目前只是按照js调用了点内容,参考下面代码进行自行修改 ">
<meta name="keywords" content="谷歌,百度,下拉框,仿搜索下拉,下拉框搜索,搜索下拉内容 ">
<style type=text/css>
body{
font-size:14px;}
</style>
<meta http-equiv=content-type content="text/html; charset=gbk"'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>