DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 仿google suggest搜索提示php版
仿google suggest搜索提示php版
編輯：AJAX詳解     

數據庫建表：

  1. CREATE TABLE `xqbar`.`suggest` (  
  2. `id` INT NOT NULL AUTO_INCREMENT ,  
  3. `title` VARCHAR( 100 ) NOT NULL ,  
  4. `hits` INT NOT NULL DEFAULT '0',  
  5. PRIMARY KEY ( `id` )   
  6. ) ENGINE = InnoDB   
  7.  
  8. insert into suggest(title,hits)values('xqbar.com',100);  
  9. insert into suggest(title,hits)values('www.xqbar.com',410);  
  10. insert into suggest(title,hits)values('http://xqbar.com',700);  
  11. insert into suggest(title,hits)values('mail:xqbar.com',200);  
  12. insert into suggest(title,hits)values('FTP:xqbar.com',100);  
  13. insert into suggest(title,hits)values('http://www.xqbar.com',70); 

search.PHP（返回的字符串需要為 xxx1|xxx2$200|100 格式，並前後對應）

  1. <?PHP  
  2. if($_GET["action"]!=''){  
  3.    #獲取用戶輸入的關鍵字  
  4.    $keyWord=$_GET["keyWord"];  
  5.    #過濾關鍵字  
  6.    $keyWord=str_replace("[","[[]",$keyWord);  
  7.    $keyWord=str_replace("&","[&]",$keyWord);  
  8.    $keyWord=str_replace("%","[%]",$keyWord);  
  9.    $keyWord=str_replace("^","[^]",$keyWord);  
  10.    #鏈接數據庫  
  11.    $conn=MySQL_connect("localhost","xqbar","xqbaradmin");  
  12.    #選擇數據庫  
  13.    @MySQL_select_db("xqbar") or dIE('sorry');  
  14.    MySQL_query('set names utf-8');  
  15.    #查詢語句  
  16.    $sql="select title,hits from suggest where title like '%".$keyWord."%' order by hits desc limit 10";  
  17.    $result=MySQL_query($sql);  
  18.    #循環得到查詢結果，返回字符串  
  19.    #格式為 結果1|結果2$結果1點擊次數|結果2點擊次數  
  20.    if($result){  
  21.    $i=1;$title='';$hits='';  
  22.    while($row=MySQL_fetch_array($result,MySQL_BOTH))  
  23.    {  
  24.      $title=$title.$row['title'];  
  25.    $hits=$hits.$row['hits'];  
  26.    if($i<MySQL_num_rows($result))  
  27.   {  
  28.    $title=$title."|";  
  29.    $hits=$hits."|";  
  30.   }  
  31.   $i++;  
  32.     }  
  33.    }  
  34.    MySQL_close();  
  35. }  
  36. ?>  
  37. <?PHP echo $title.'$'.$hits;?> 

JS代碼

引入prototye.js有朋友說這個庫太大，或者把，不習慣的朋友可以使用jquery.JS框架或者直接創建AJax對象，這個我就不想說了，這裡直接引用prototye.JS框架

<script type="text/Javascript" src="prototype.JS"></script>

創建層和顯示查詢結果的JS代碼

 

  1. <script type="text/Javascript">  
  2. //定義變量lastindex 表示為鼠標在查詢結果上滑動所在位置，初始為-1  
  3. var lastindex=-1;  
  4. //定義變量flag 表示是否根據用戶輸入的關鍵字進行AJax查詢,flase為允許查詢 true為禁止查詢  
  5. var flag=false;  
  6. //返回的查詢結果生成的數組長度  
  7. var listlength=0;  
  8. //創建自定字符串，優化效率  
  9. function StringBuffer(){this.data=[];}   
  10. //賦值  
  11. StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;}   
  12. //輸出  
  13. StringBuffer.prototype.tostring=function(){return this.data.join("");}   
  14. //去掉字符串兩邊空格  
  15. String.prototype.Trim = function(){return this.replace(/(^\s*)|(\s*$)/g, "");}  
  16. //隱藏函數 主要是隱藏顯示的提示下拉層和iframe，關於iframe下面在說其作用  
  17. function hiddensearch()  
  18. {  
  19. $('rlist').style.display="none";  
  20. $('rFrame').style.display="none";  
  21. }  
  22. //顯示函數 主要是顯示的提示下拉層和iframe 參數num,根據該參數控制要顯示提示層和iframe的高度  
  23. function showsearch(num)  
  24. {  
  25.   $('rlist').style.display='';  
  26.   $('rFrame').style.display='';  
  27.   //這裡我定義每個返回查詢結果的提示高度為20px,其中提示層總高度又加了num,是因為我在定義樣式時使用了padding一個像素  
  28.   $('rlist').style.height=num*20+num+'px';  
  29.   //同樣定位iframe的高度  
  30.   $('rFrame').style.height=num*20+num+'px';  
  31. }  
  32. //返回文本輸入框的坐標函數，參數element為要返回的對象,參數offset可選為offsetLeft|offsetTop 分別表示為該對象距離左窗口上角的絕對位置  
  33. //www.devdao.com 利用這個函數可以定位我們要顯示的提示層位置，使提示層正確的顯示在文本輸入框下面  
  34. function getposition(element,offset)  
  35. {  
  36.     var c=0;  
  37.     while(element)  
  38.     {  
  39.         c+=element[offset];  
  40.         element=element.offsetParent  
  41.     }  
  42.     return c;  
  43. }  
  44. //創建提示層函數 包括提示層和為了避免在文本輸入框下面出現select下拉選框時我們的提示層不能再select之上的iframe  
  45. //可以理解為當文本輸入框下有select下拉選框時從底向上依次為 select下拉選框-iframe-提示層  
  46. function createlist()  
  47. {  
  48. //創建提示層  
  49. var listDiv=document.createElement("div");  
  50. //提示層id  
  51. listDiv.id="rlist";          
  52. listDiv.style.zIndex="2";  
  53. listDiv.style.position="absolute";   
  54. listDiv.style.border="solid 1px #000000";  
  55. listDiv.style.backgroundColor="#FFFFFF";  
  56. listDiv.style.display="none";   
  57. listDiv.style.width=$('keyWord').clIEntWidth+"px";  
  58. listDiv.style.left=getposition($('keyWord'),'offsetLeft')+1.5+"px";  
  59. listDiv.style.top =(getposition($('keyWord'),'offsetTop')+$('keyWord').clIEntHeight +3)+"px";  
  60.  
  61. var listFrame=document.createElement("iframe");  
  62. listFrame.id="rFrame";  
  63. listFrame.style.zIndex="1";  
  64. listFrame.style.position="absolute";  
  65. listFrame.style.border="0";  
  66. listFrame.style.display="none";   
  67. listFrame.style.width=$('keyWord').clIEntWidth+"px";  
  68. listFrame.style.left=getposition($('keyWord'),'offsetLeft')+1+"px";  
  69. listFrame.style.top =(getposition($('keyWord'),'offsetTop')+$('keyWord').clIEntHeight +3)+"px";  
  70. document.body.appendChild(listDiv);         
  71. document.body.appendChild(listFrame);  
  72. }  
  73. function setstyle(element,classname)  
  74. {  
  75. switch (classname)  
  76.     {  
  77.      case 'm':  
  78.        element.style.fontSize="12px";  
  79.     element.style.fontFamily="arial,sans-serif";  
  80.     element.style.backgroundColor="#3366cc";  
  81.     element.style.color="black";  
  82.     element.style.width=$('keyWord').clIEntWidth-2+"px";  
  83.     element.style.height="20px";  
  84.           element.style.padding="1px 0px 0px 2px";  
  85.           if(element.displaySpan)element.displaySpan.style.color="white" 
  86.     break;  
  87.      case 'd':  
  88.        element.style.fontSize="12px";  
  89.     element.style.fontFamily="arial,sans-serif";  
  90.     element.style.backgroundColor="white";  
  91.     element.style.color="black";  
  92.     element.style.width=$('keyWord').clIEntWidth-2+"px";  
  93.     element.style.height="20px";  
  94.           element.style.padding="1px 0px 0px 2px";  
  95.           if(element.displaySpan)element.displaySpan.style.color="green" 
  96.     break;  
  97.   case 't':  
  98.        element.style.width="80%";  
  99.     if(window.navigator.userAgent.toLowerCase().indexOf("Firefox")!=-1)element.style.CSSFloat="left";  
  100.     else element.style.styleFloat="left";  
  101.     element.style.whiteSpace="nowrap";  
  102.     element.style.overflow="hidden";  
  103.     element.style.textOverflow="ellipsis";  
  104.     element.style.fontSize="12px";  
  105.     element.style.textAlign="left";  
  106.     break;  
  107.   case 'h':  
  108.        element.style.width="20%";  
  109.     if(window.navigator.userAgent.toLowerCase().indexOf("Firefox")!=-1)element.style.CSSFloat="right";  
  110.     else element.style.styleFloat="right";  
  111.     element.style.textAlign="right";  
  112.     element.style.color="green";  
  113.     break;  
  114.     }  
  115. }  
  116. function focusitem(index)  
  117. {  
  118.   if($('item'+lastindex)!=null)setstyle($('item'+lastindex),'d');  
  119.   if($('item'+index)!=null)  
  120.   {  
  121.    setstyle($('item'+index), 'm');  
  122.    lastindex=index;  
  123.   }  
  124.   else $("keyWord").focus();  
  125. }  
  126. function searchclick(index)  
  127. {  
  128.   $("keyWord").value=$('title'+index).innerHtml;  
  129.   flag=true;  
  130. }  
  131. function searchkeydown(e)  
  132. {  
  133. if($('rlist').innerHtml=='')return;  
  134.   var keycode=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:e.which;  
  135.   //down  
  136.   if(keycode==40)  
  137.   {  
  138. if(lastindex==-1||lastindex==listlength-1)  
  139. {  
  140.   focusitem(0);  
  141.   searchclick(0);  
  142. }  
  143. else{  
  144.   focusitem(lastindex+1);  
  145.   searchclick(lastindex+1);  
  146. }  
  147.   }  
  148. if(keycode==38)  
  149. {  
  150. if(lastindex==-1)  
  151. {  
  152.   focusitem(0);  
  153.   searchclick(0);  
  154. }  
  155. else{  
  156.   focusitem(lastindex-1);  
  157.   searchclick(lastindex-1);  
  158. }  
  159. }  
  160. if(keycode==13)  
  161. {  
  162.   focusitem(lastindex);  
  163.   $("keyWord").value=$('title'+lastindex).innerText;  
  164. }      
  165. if(keycode==46||keycode==8){flag=false;AJaxsearch($F('keyWord').substring(0,$F('keyWord').length-1).Trim());}  
  166. }  
  167. function showresult(XMLhttp)  
  168. {  
  169. var result=unescape(XMLhttp.responseText);  
  170. if(result!=''){  
  171.     var resultstring=new StringBuffer();  
  172.        var title=result.split('$')[0];  
  173.        var hits=result.split('$')[1];  
  174.     for(var i=0;i<title.split('|').length;i++)  
  175.     {  
  176.     resultstring.append('<div id="item'+i+'" onmousemove="focusitem('+i+')" onmousedown="searchclick('+i+')">');  
  177.     resultstring.append('<span id=title'+i+'>');  
  178.     resultstring.append(title.split('|'));  
  179.     resultstring.append('</span>');  
  180.     resultstring.append('<span id=hits'+i+'>');  
  181.     resultstring.append(hits.split('|'));  
  182.     resultstring.append('</span>');  
  183.     resultstring.append('</div>');  
  184.     }  
  185.     $('rlist').innerHtml=resultstring.tostring();  
  186.     for(var j=0;j<title.split('|').length;j++)  
  187.     {  
  188.      setstyle($('item'+j),'d');  
  189.   $('item'+j).displaySpan=$('hits'+j);  
  190.      setstyle($('title'+j),'t');  
  191.      setstyle($('hits'+j),'h');  
  192.     }  
  193.     showsearch(title.split('|').length);  
  194.     listlength=title.split('|').length;  
  195.     lastindex=-1;  
  196. }  
  197. else hiddensearch();  
  198. }  
  199. function AJaxsearch(value)  
  200. {  
  201. new AJax.Request('search.PHP',{method:"get",parameters:"action=do&keyWord="+escape(value),onComplete:showresult});  
  202. }  
  203. function main()  
  204. {  
  205. $('keyWord').className=$('keyWord').className=='inputblue'?'inputfocus':'inputblue';  
  206. if($F('keyWord').Trim()=='')hiddensearch();  
  207. else 
  208. {  
  209.       if($F('keyWord')!=''&&flag==false)AJaxsearch($F('keyWord').Trim());  
  210.    if(listlength!=0)$('keyWord').onkeydown=searchkeydown;  
  211.    else hiddensearch();  
  212. }  
  213. }  
  214. function oninit()  
  215. {  
  216. $('keyWord').autocomplete="off";  
  217. $('keyWord').onfocus=main;  
  218. $('keyWord').onkeyup=main;  
  219. $('keyWord').onblur=hiddensearch;   
  220. createlist();  
  221. }  
  222. Event.observe(window,'load',oninit);  
  223. </script> 

搜索框需要設置的代碼

  1. <form id="form1" name="form1" method="post" action=""> 
  2.      　<b>輸入搜索關鍵字</b> 
  3.     <input name="keyWord" type="text" class="inputblue" id="keyWord" maxlength="20" style="width:300px;" />   
  4. </form> 
AJAX詳解
Ajax開發過程中提交獲取數據的亂碼問題
　這兩天在繼續我的AJax之旅。一直在抓緊步伐。　　前天試驗使用AJax提交form表單到服務器，
AJAX應用中使用TODO服務[ASP.NET]
在我們已經定義了所有運行我們的TODO應用程序所需要的資料，是該以啟用ASP.Net AJAX的W
JQuery和CSS打造炫酷動感菜單
本教程將分步講解如何使用JQuery和CSS打造一個炫酷動感菜單。jQuery的write les

相關文章

AJAX基礎知識AJAX詳解
小編推薦
詳解Ajax在ASP.NET中的實現方式 AJAX集成數據庫技術 實現實時數據傳輸 ajax下導出excel的解決辦法 一個Ajax.NET的查詢實例 細說DIV+CSS樣式表標准的優點 AJAX、AJAX實例及AJAX源代碼（asp） 使用正則表達式優化網頁（web頁面）代碼實例及代碼 PHP PEAR::Config管理配置信息 asp+XMLHTTP組件做采集常用函數收集 [四天學會ajax] 學習Ajax教程第三天
熱門推薦
微軟推出Ajax工具包 Ajax Hacks-Hack 10. 使用CSS文件產生格式化的的信息 Javascript語言特性 在ASP.NET中應用AJAX技術 使用jQuery.Ajax向ASP.NET MVC控制器Post數據 AJAX POST提交中文亂碼解決(jsp) ajax下導出excel的解決辦法 軟件開發入門學習的個人看法 關聯菜單實現方法
大家都在看
js隨機生成字母數字組合的字符串 隨機動畫數字 css控制背景圖像不隨滾動條的滾動而滾動 寫JQuery插件的基本知識 XML在.net平台下的自定義控件的應用(1) js檢查是否關閉浏覽器的方法 基於JavaScript實現全屏透明遮罩div層鎖屏效果 Javascript檢查復選框checkbox是否選中 使用CSS3制作一個簡單的Chrome模擬器
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved