AJAX anti-google Suggest prompt box

Last Update:2013-11-17 Source: Internet

Author: User

Tags html form input

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

AJAX anti-google Suggest prompt box

In the HTML form
This is an HTML webpage. It contains a simple HTML table and links to a JavaScript:

<body>
<form> First Name:<input type="text" id="txt1"onkeyup="showHint(this.value)"></form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
For example, the explanation-h tml form
As you can see, the HTML webpage contains a simple HTML form input field called "txt1 ".

The format of the work is as follows:

Event triggered when the user presses and released investment in key fields
When the event-triggered function requires showHint () to be executed.
The following form is a <span> so-called "txtHint ". This is the showHint () function returned as a placeholder.

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

JavaScript
JavaScript code is stored in "clienthint. js" and related HTML files:
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;}
For example
This showHint () function

This function executes the input field of one character input each time.

If some input is made, the function of the text field (str. length "0) is as follows:

Defines the URL (File) transmitted to the server
Add the URL content of a parameter (Q) and enter the field
Add a random number to prevent the server from using cached files
Call the GetXmlHttpObject function to create an XMLHTTP object. The stateChanged change is triggered when it describes the functional requirements of the object.
The XMLHTTP object and specific website are opened.
Send an HTTP request to the server
If the input field is empty, the txtHint reserved position is cleared.

This stateChanged () function

This function executes every change in the state of the XMLHTTP object.

When the status changes, the txtHint placeholder of the 4 (or "finished") content is filled with the response text.

The GetXmlHttpObject () function

AJAX applications can only run in Web browsers and complete XML support.

The so-called function of the above Code requires GetXmlHttpObject ().

It aims to solve this problem and create different browsers with different XMLHTTP objects.

This is explained in the previous chapter.


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

PHP page
The JavaScript code required by the Web server is a simple php file named "gethint. php ".

In "gethint. php", this code checks a series of names and returns the names to the client:
<?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;?>
Reprinted please indicate from http://www.111cn.cn/wy/yw.html

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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