DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax文本框輸入提示
Ajax文本框輸入提示
編輯：AJAX詳解     

一個AJax文本框輸入提示的例子，用ASP實現:

前台文件

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"> 
  2. <Html XMLns="http://www.w3.org/1999/xHtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" /> 
  5. <title>文本框輸入提示</title> 
  6. <style type="text/CSS">...  
  7. <!--  
  8. .keyWord {...}{width:150px; height:20px; border:#0066FF 1px solid;}/**//*文本框樣式*/  
  9. #keytishi {...}{width:150px; height:auto; border:#0066FF 1px solid; position:absolute; display:none;}/**//*提示層樣式*/  
  10. #keytishi ul {...}{ margin:0;}/**//*提示層樣式*/  
  11. #keytishi ul li{...}{margin:0;list-style-type:none; line-height:16px; height:16px; font-size:12px; padding:2px;}/**//*提示層樣式*/  
  12. #keytishi ul li a {...}{display:block; width:150px; height:16px; text-decoration:none;}/**//*提示層樣式*/  
  13. #keytishi ul li a:hover {...}{background-color:#0099FF;}/**//*提示層樣式*/  
  14. --> 
  15. </style> 
  16. <script type="text/Javascript">...  
  17. <!--  
  18.  
  19. //建立XMLHttpRequest對象  
  20. var XMLhttp;  
  21. try...{  
  22.     XMLhttp= new ActiveXObject('Msxml2.XMLHTTP');  
  23. }catch(e)...{  
  24.     try...{  
  25.         XMLhttp= new ActiveXObject('Microsoft.XMLHTTP');  
  26.     }catch(e)...{  
  27.         try...{  
  28.             XMLhttp= new XMLHttpRequest();  
  29.         }catch(e)...{}  
  30.     }  
  31. }  
  32.  
  33. function getKeyWord()...{  
  34.     var obj = document.getElementById("search");//獲取文本域對象  
  35.     if(obj.value=="")...{  
  36.         return;  
  37.     }  
  38.     var top=0;  
  39.     var left=0;  
  40.     while(obj)...{//此循環得到文件域對象在頁面中的絕對位置  
  41.         top += obj["offsetTop"];  
  42.         left += obj["offsetLeft"];  
  43.         objobj = obj.offsetParent;  
  44.     }  
  45.     XMLhttp.open("get","input.ASP?keyWord="+document.getElementById("search").value,true);  
  46.     XMLhttp.onreadystatechange = function()...{  
  47.         if(XMLhttp.readyState == 4)  
  48.         ...{  
  49.             if(XMLhttp.status == 200)  
  50.             ...{  
  51.                 if(XMLhttp.responseText!="")...{  
  52.                     document.getElementById("keytishi").innerHtml = unescape(XMLhttp.responseText);//把後台返回的數據填充到提示層  
  53.                     document.getElementById("keytishi").style.left = left + "px";//設置提示層的位置,左  
  54.                     document.getElementById("keytishi").style.top = (top + 25) + "px";//設置提示層的位置,上  
  55.                     document.getElementById("keytishi").style.display = "block";//設置提示層可見  
  56.                 }else...{  
  57.                     document.getElementById("keytishi").innerHtml = "";//清空提示層  
  58.                     document.getElementById("keytishi").style.display = "none";//設置提示層不可見  
  59.                 }  
  60.             }  
  61.             else...{  
  62.               
  63.             }  
  64.         }  
  65.     }  
  66.     XMLhttp.setRequestHeader("If-ModifIEd-Since","0");  
  67.     XMLhttp.send(null);  
  68. }  
  69. function input(str)...{  
  70.     document.getElementById("search").value=str;//從提示層選擇你需要的數據填充到文本框  
  71.     document.getElementById("keytishi").innerHtml = "";//清空提示層  
  72.     document.getElementById("keytishi").style.display = "none";//設置提示層不可見  
  73. }  
  74. //--> 
  75. </script> 
  76. </head> 
  77. <body> 
  78. <input type="text" class="keyWord" id="search" name="search" onkeyup="getKeyWord();" onclick="getKeyWord();" /> 
  79. <div id="keytishi"></div><!--提示層--> 
  80. </body> 
  81. </Html> 

後台文件 [input.ASP]

  1. <%...@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 
  2. <!--#include file="conn.ASP"--> 
  3. <%...  
  4.     dim rs  
  5.     dim sql  
  6.       
  7.     dim keyWords  
  8.       
  9.     keyWrods = Request("keyWord")  
  10.       
  11.     Set rs = Server.CreateObject("ADODB.Recordset")  
  12.     sql = "select * from king_test where keyWord like '%"&keyWrods&"%'"  
  13.     rs.open sql,conn,1,1  
  14.     if not (rs.bof and rs.eof) then  
  15.     Response.Write("<ul>")  
  16.     do while not rs.eof  
  17. %> 
  18. <li><a href="Javascript:void(null);" onclick="input('<%Response.Write(escape(rs("keyWord")))%>');"><%...Response.Write(escape(rs("keyWord")))%></a></li> 
  19. <%...  
  20.     rs.movenext  
  21.     loop  
  22.     Response.Write("<ul>")  
  23.     end if  
  24.     rs.close  
  25.     set rs = nothing 
  26.     conn.close  
  27.     Set conn = nothing 
  28. %> 

escape與unescape是用來編碼的和解碼的,這是為了避免漢字出現亂碼，在XP + IE6,7,Firefox測試通過

AJAX詳解
提高FF中查看JS錯誤效率的小插件
未能加載文件或程序集“AJaxControlToolkit”或它的某一個依賴項。系統找不到指定的文
深入Atlas系列：探究ApplicationServices（3）
如果不能在客戶端進行自定義的話，Profile Service的自定義能力還是遠遠不夠的。雖然Pr
基於css樣式綁定的樣式驅動式AJAX程序開發（.net實現）
 序言：     前面我介紹了我做的.net版的

相關文章

AJAX基礎知識AJAX詳解
小編推薦
盛大 sina 共同的選擇：開曼群島 AJAX中文問題 使用AjaxPro開發四級無刷新聯動下拉框 asp.net ajax 和 asp.net 2.0中的fileupload合力打造無刷新文件上傳控件 設計模式PHP5實現之----策略（Strategy） PHP和AJAX打造高級RSS聚合器 Ajax獲取數據庫中的字段 C++中的智能引用指針類,可以和STL配合使用 （Javascript）prototype的一個優勢也是缺點 attempttowriteareadonlydatabase錯誤的解決（C#，SQLite）..
熱門推薦
結合MS AJAX將js文件編譯到動態鏈接庫 詳解Ajax在ASP.NET中的實現方式 SOA&Web2.0：權威解釋什麼是web2.0 精華：AJAX開發簡略 (第二部分) 使用jQuery選擇復雜HTML的遍歷函數 XMLHTTP 對象及其方法簡介 jQuery框架實例代碼分析 使用AJAX+J2EE實現網上會議室系統 ajax框架封裝
大家都在看
跟我學XSL（一） jQuery與其它庫沖突的解決方法 12 款 JS 代碼測試必備工具(翻譯) JavaScript實現使用Canvas繪制圖形的基本教程 文本溢出使用省略號 Ajax+Asp源代碼]讀取數據庫內容的表格(沒有用框架)第1/2頁 JavaScript獲取網頁、浏覽器、屏幕高度和寬度匯總 jquery動態創建div與input的實例代碼
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved