仿百度，谷歌搜索下拉框 以下是代碼，代碼有待優(yōu)化，本站原創(chuàng)
查看效果：仿百度谷歌搜索下拉框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<title>仿百度搜索下拉框，放搜索下拉框，仿谷歌搜索下拉框 原創(chuàng)轉載請注明</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=gb2312" />
</head>
<script language="javascript" src="js/jquery-1.4.4.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;//獲取搜索框的左邊位移 ，網站制作學習網原創(chuàng)
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(); });
///創(chuàng)建隱藏的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>
更多信息請查看IT技術專欄
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試
