Imitation Baidu Search (AJAX)

<!--Create a div that includes a text input box and a button--
<div id= "Sousuo" >

<input type= "text" id= "TXT"/><input type= "button" id= "btn" value= "Search"/>
　　<!--build a div to display the data that the keyword queried--
<div id= "Liebiao" >
<ul></ul>
</div>
</div>

<!--create a table table that displays the details of the search content-
<table id= "TB" border= "1" cellpadding= "0" cellspacing= "0" width= "80%" >
</table>

</body>
<!--Create the required events with jquery--
<script type= "Text/javascript" >
$ (document). Ready (function (e) {
　　 //Text Input Auto Index event
$ ("#txt"). KeyUp (function () {
Define a variable to receive a value in a text box
var txt=$ ("#txt"). Val ();
Determine if there is content in the text box,
if (txt.length>0)
{
Show details of similar content
Xanshi ();
List content length is greater than 0 o'clock, display query list
$ ("#liebiao"). Show ();
$ ("#tb"). Show ();
Calling the Ajax method
$.ajax ({
Async:false,//Change to synchronous execution
URL: "txtchuli.php",
data:{a:txt,bs:0},//Pass data to add a custom property to distinguish between the actions performed on the processing page
Type: "GET",
DataType: "TEXT",
Success:function (data) {
Splits the returned string into an array
var hang = Data.trim (). Split ("|");
alert (hang);
var str = "";
Iterate through each set of data in an array
for (Var i=0;i{
str = str+ "<li class= ' AA ' >" +hang[i]+ "</li>";
}
Put the traversed data into the page display
$ ("ul"). html (str);
}
})
}
Else
{
Hide the list if the content in the text box is not greater than 0
$ ("#liebiao"). Hide ();
$ ("#tb"). Hide ();
}
　　　　 //mouse over event
$ (". AA"). MouseEnter (function () {
Initialize all UL background colors
$ (". AA"). CSS ("Background-color", "white");
Change the background color of the passing UL
$ (this). CSS ("Background-color", "#F00");
Setting the mouse style
$ (this). CSS ("cursor", "pointer");
})
　　　　 //Mouse leave event
$ (". AA"). MouseLeave (function () {
Change the background color of the left UL
$ (this). CSS ("Background-color", "white");
})
　　　　 //mouse click to select Event
$ (". AA"). Click (function () {
Take the contents of the selected item and put it in the variable top
var top=$ (this). text ();
Put the contents of the fetch into the text box
$ ("#txt"). Val (top);
Hide Query List
$ ("#liebiao"). CSS ("display", "none");
Show details of the selection when selected
Xanshi ();
})
})
});
//Create an event that displays details
function Xanshi () {

var txt= $ ("#txt"). Val ();
$.ajax ({
Async:false,//Change to synchronous execution
URL: "txtchuli.php",
Data:{a:txt,bs:1},//Pass data to add a custom property to distinguish between the actions performed on the processing page
Type: "GET",
DataType: "TEXT",
Success:function (data) {
Split the data back and get the data for each row
var hang =data.trim (). Split ("|");
CREATE TABLE initial Content
var str= "<tr><td> Area number </td><td> region name </td><td> parent area number </td></tr>";
Iterate through the data after splitting
for (Var i=0;i{
Re-split each row of data into the data for each column
var lie=hang[i].split ("^");
Create stitching table Data
str=str+ "<tr><td>" +lie[0]+ "</td><td>" +lie[1]+ "</td><td>" +lie[2]+ "</td ></tr> "
}
Bring the stitched data back to the page to display
$ ("#tb"). html (str);
}
})
}

</script>

Imitation Baidu Search (AJAX)