AJAX 防google 的Suggest提示框

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在HTML表單
這是HTML網頁。它包含一個簡單的HTML表格，並連結到一個JavaScript ：

<html><head><script src="clienthint.js"></script> </head>

<body>

<form> First Name:<input type="text" id="txt1"onkeyup="showHint(this.value)"></form>

<p>Suggestions: <span id="txtHint"></span></p>

</body></html>

  
   例如解釋-的H TML表單
正如你可以看到， HTML網頁上面載有一個簡單的HTML表單的輸入外地所謂“ txt1 ” 。 

作品的形式像這樣： 

事件觸發當使用者按下，並發布了關鍵領域的投入
當事件觸發的功能要求showHint （ ）被處決。 
下面的形式是一個<span>所謂的“ txtHint ” 。這是作為一個預留位置返回的資料showHint （ ）函數。 

-------------------------------------------------- ------------------------------ 

的JavaScript 
JavaScript代碼是儲存在“ clienthint.js ”和相關的HTML檔案：
   var xmlHttpfunction showHint(str){if (str.length==0)  {   document.getElementById("txtHint").innerHTML=""  return  }xmlHttp=GetXmlHttpObject()if (xmlHttp==null)  {  alert ("Browser does not support HTTP Request")  return  } var url="gethint.php"url=url+"?q="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)} function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {  document.getElementById("txtHint").innerHTML=xmlHttp.responseText  } }
   function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { // Internet Explorer try  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  } catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }return xmlHttp;}
       
     例如解釋 
該showHint （ ）函數 

此函數執行每次一個字元輸入的輸入欄位。 

如果有一些投入，在文字欄位（ str.length “ 0 ）的功能執行如下： 

界定了網址（檔）傳送給伺服器 
添加一個參數（ Q ）的網址的內容，輸入欄位 
添加一個隨機數字，以防止伺服器使用快取檔案 
籲請GetXmlHttpObject函數建立一個XMLHTTP物件，並講述了對象執行的功能要求時stateChanged變化是觸發 
開幕XMLHTTP物件與特定網址。 
發送一個HTTP請求到伺服器 
如果輸入欄位是空的，功能簡單清除的內容txtHint預留位置。 

該stateChanged （ ）函數 

此函數執行每一次的狀態的XMLHTTP對象的變化。 

當狀態的改變，以4 （或“完成” ）的內容txtHint佔位充滿響應文本。 

該GetXmlHttpObject （ ）函數 

AJAX應用程式只能運行在網頁瀏覽器與完整的XML支援。 

上述的程式碼所謂的功能要求GetXmlHttpObject （ ） 。 

的宗旨職能是解決這個問題創造不同的XMLHTTP對象不同的瀏覽器。 

這是解釋在前一章。 


-------------------------------------------------- ------------------------------ 

PHP頁面 
網頁伺服器要求的JavaScript代碼是一個簡單的PHP檔案名稱為“ gethint.php ” 。 

該代碼在“ gethint.php ”檢查一系列的名稱和相應的回報的名字給用戶端：
     <?php// Fill up array with names$a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva";$a[]="Fiona";$a[]="Gunda";$a[]="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]="Nina";$a[]="Ophelia";$a[]="Petunia";$a[]="Amanda";$a[]="Raquel";$a[]="Cindy";$a[]="Doris";$a[]="Eve";$a[]="Evita";$a[]="Sunniva";$a[]="Tove";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a[]="Wenche";$a[]="Vicky";
     //get the q parameter from URL$q=$_GET["q"];
     //lookup all hints from array if length of q>0if (strlen($q) > 0){$hint="";for($i=0; $i<count($a); $i++)  {  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))    {    if ($hint=="")      {      $hint=$a[$i];      }    else      {      $hint=$hint." , ".$a[$i];      }    }  }}//Set output to "no suggestion" if no hint were found//or to the correct valuesif ($hint == ""){$response="no suggestion";}else{$response=$hint;}//output the responseecho $response;?>
     轉載請註明來自http://www.111cn.net/wy/yw.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More