AJAX anti-Google suggest prompt box
In an HTML form
This is an HTML page. It contains a simple HTML table and links to a javascript:
<body><form> Name: <input type= "text" id= "txt1" onkeyup= "Showhint (this.value)" > </ Form><p>suggestions: <span id= "Txthint" ></span></p></body>For example the explanation-the H tml form
As you can see, the HTML page contains a simple HTML form for the input field called "Txt1".
The form of the work is like this:
Event triggers when the user presses and publishes key areas of input
When the event triggers a function requiring showhint () to be executed.
The following form is a <span> so-called "txthint". This is the data Showhint () function returned as a placeholder.
-------------------------------------------------- ------------------------------
The JavaScript
JavaScript code is stored in "Clienthint.js" and related HTML files:var xmlHttp function 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= "+str url=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, explain
the Showhint () function
This function performs an input field that enters one character at a time.
If there is some input, the function of the text field (str.length "0) is performed as follows:
defines the URL (file) to be transmitted to the server
Add a parameter (Q) to the content of the URL, input field
Add a random number, To prevent the server from using the cache file
calls the Getxmlhttpobject function to create a XMLHTTP object and describes the functional requirements of the object's execution when statechanged change is triggered
the opening XMLHTTP object with a specific URL.
Send an HTTP request to the server
if the input field is empty, the feature simply clears the content txthint the reservation location.
The statechanged () function
This function performs the change of the XMLHTTP object for each state.
When the state changes, the contents of 4 (or "txthint") are filled with the response text. The
Getxmlhttpobject () function
Ajax application can only run in the Web browser with full XML support.
The code described above is called a function requiring Getxmlhttpobject (). The objective function of the
is to solve this problem by creating different browsers for 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".
The code checks the name of a series of names and the corresponding returns in "gethint.php" 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>0 if (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 values if ($hint = = "") { $r esponse= "no suggestion"; } else { $response = $hint; } Output the response echo $response; ? >Reprint please indicate from http://www.111cn.net/wy/yw.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
