A simple search implementation method based on Ajax _ajax related

This article illustrates a simple search implementation method based on Ajax. Share to everyone for your reference, specific as follows:

This uses two. aspx files, one called Default.aspx, one called Ajaxoperations.aspx, the first to enter the search data, and the latter to process the search keyword. JS folder below also has a testjs.js file, it is the core of AJAX operations. Yes, the code is cheap. Look at the code:

Testjs.js

This function is equivalent to Document.getelementbyid/document.all function $ (s) {if (document.getElementById) {return eval (' Document.gete Lementbyid ("' + S + '") ');}
else {return eval (' document.all. ' + s);}}
 Creates a XMLHttpRequest object to send an AJAX request function createxmlhttp () {var xmlHttp = false; var arrsignatures = ["MSXML2. xmlhttp.5.0 "," MSXML2. xmlhttp.4.0 "," MSXML2. xmlhttp.3.0 "," MSXML2.
 XMLHTTP "," Microsoft.XMLHTTP "];
   for (var i = 0; i < arrsignatures.length i++) {try {xmlHttp = new ActiveXObject (arrsignatures[i));
  return xmlHttp; 
 The catch (oerror) {xmlHttp = false;//ignore}}//throw new Error ("MSXML isn't installed on your system.");
 if (!xmlhttp && typeof xmlhttprequest!= ' undefined ') {xmlHttp = new XMLHttpRequest ();
return xmlHttp;
 function Addajaxsearch () {Inputfield = $ ("Txtsearch");
 completetable = $ ("SUGGESTTB");
 Completediv = $ ("popup");
 Completebody = $ ("Suggestbody");
 var tempstr = Inputfield.value;
 alert (TEMPSTR); VAr KeyWord = encodeURI (TEMPSTR);
 if (TempStr = = "") return;
 var xmlreq = Createxmlhttp ();
 Xmlreq.open ("Post", "ajaxoperations.aspx?searchkeyword=" + KeyWord, True); Xmlreq.onreadystatechange = function () {if (xmlreq.readystate = 4) {if (Xmlreq.status =) {//xmlreq.respo
   Nsetext for the output of the segment string setnames (Xmlreq.responsetext);
   else {alert ("Connect the server failed!");
}} xmlreq.send (null);
  //Set table Data function Setnames (names) {if (names = "") in Div {clearnames ();
 Return } clearnames (); Empty the existing table data in the Div setoffsets ();
 Set Div to the appropriate location Var row, cell, Txtnode;
 var s = names.split ("#");
  for (var i = 0; i < s.length i++) {//Show similar search dropdown option var nextnode = s[i];
  row = Document.createelement ("tr");
  Cell = document.createelement ("TD");
  Cell.onmouseout = function () {this.style.backgroundColor = ';};
  Cell.onmouseover = function () {This.style.backgroundColor = ' #E8F2FE ';}; Cell.onclick = function () {Completefield (this); The search box is set to the selected data Cell.pop = "T";
  Txtnode = document.createTextNode (NextNode);
  Cell.appendchild (Txtnode);
  Row.appendchild (cell);
 $ ("Suggestbody"). appendchild (row);
 }//Empty the existing table data function Clearnames () {completebody = $ ("Suggestbody") in the Div;
 var ind = CompleteBody.childNodes.length;
 for (var i = ind-1 i >= 0; i--) {completebody.removechild (completebody.childnodes[i]);
 } Completediv = $ ("popup");
CompleteDiv.style.border = "None";
 }//Set div to the appropriate position function setoffsets () {completeTable.style.width = Inputfield.offsetwidth; + "px";
 var left = Calculateoffset (Inputfield, "offsetleft");
 var top = Calculateoffset (Inputfield, "offsettop") + inputfield.offsetheight;
 CompleteDiv.style.border = "Black 1px solid";
 CompleteDiv.style.left = left + "px";
CompleteDiv.style.top = top + "px";
 function Calculateoffset (field, attr) {var offset = 0;
  while (field) {offset + = field[attr];
 field = Field.offsetparent;
return offset; }//The search box is set to the selected data function completEfield (cell) {inputfield.value = Cell.firstChild.nodeValue;//The search box is set to the selected data Clearnames ();//Empty the existing tabular data in the div}//To set when the mouse is lost
 Hidden Document.onmousedown = function () {if (!event.srcelement.pop) Clearnames () for the text box after focus ()//Fill in the input box

Default.aspx:

<%@ Page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "Webtest2008.default"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Default.aspx.cs:

Using System;
Using System.Collections.Generic;
Using System.Web;
Using System.Web.UI;
Using System.Web.UI.WebControls;
Namespace WebTest2008
{public
 partial class Default:System.Web.UI.Page
 {
  protected void Page_Load ( Object sender, EventArgs e)
  {
  }
 }
}

Ajaxoperations.aspx:

Copy Code code as follows:

<%@ Page language= "C #" autoeventwireup= true "codebehind=" AjaxOperations.aspx.cs "inherits=" Webtest2008.ajaxoperations "%>

AjaxOperations.aspx.cs:

Using System;
Using System.Collections.Generic;
Using System.Web;
Using System.Web.UI;
Using System.Web.UI.WebControls;
Namespace WebTest2008
{public
 partial class AjaxOperations:System.Web.UI.Page
 {
  protected void Page _load (object sender, EventArgs e)
  {
   if (!string). IsNullOrEmpty (request["SearchKeyword"]))
   {
    string tempstr = request[' SearchKeyword '];
    /* Test with the actual project can be retrieved on the database and other related operations, here simplifies the * *
    System.Text.StringBuilder sb = new System.Text.StringBuilder ();
    Sb. Append (TempStr + "#");
    Sb. Append ("#");
    Sb. Append (TempStr + = "" + tempstr);
    Sb. Append ("#");
    Sb. Append (TempStr + = "" + tempstr);
    Response.Write (sb.) ToString (). TrimEnd (new char[] {' # '});}}}

The above code I have tested through, copy paste run try it.

"The pain of real-time search is much greater than the help he brings," he said, just after reading an article. That's why Google suggest is still in beta testing and not on the home page. You cannot use the return button to view the previous search or return to the previous page when searching on start.com live.com. Perhaps no one has come to finish the job, but it should be difficult to do this job at least not knowing it or causing more trouble. There are already many open source frameworks that can implement the history feature. In fact, Ajax real-time search is still very attractive, now many sites have this function. It is very meaningful to study.

I hope this article will help you with Ajax programming.