本文實例講述了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 = ["網站制作學習網","網站制作","m.survivalescaperooms.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相關內容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
