Ajax-based simple search implementation method,

Ajax-based simple search implementation method,

This example describes how to implement a simple search based on ajax. We will share this with you for your reference. The details are as follows:

Here two. aspx files are used, one is Default. aspx and the other is AjaxOperations. aspx. The first is used to input search data, and the other is used to process search keywords. The js folder contains a file named testJs. js, which is the core part of ajax operations. Good, code is cheap. Check the Code:

TestJs. js

// This function is equivalent to document. getElementById/document. allfunction $ (s) {if (document. getElementById) {return eval ('document. getElementById ("'+ s +'") ');} else {return eval ('document. all. '+ s) ;}// create the XMLHttpRequest object to send the 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 "]; f Or (var I = 0; I <arrSignatures. length; I ++) {try {xmlHttp = new ActiveXObject (arrSignatures [I]); return xmlHttp;} catch (oError) {xmlHttp = false; // ignore }}// throw new Error ("MSXML is not 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 = 200) {// xmlReq. responseText is the output string setNames (xmlReq. responseText);} else {alert ("Connect the server failed! ") ;}} XmlReq. send (null);} // set table data function setNames (names) {if (names = "") {clearNames (); return;} clearNames (); // clear the existing table data setOffsets () in the div; // set the div to the appropriate position var row, cell, txtNode; var s = names. split ("#"); for (var I = 0; I <s. length; I ++) {// display the following options: 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) ;}; // set the data cell to be selected in the search box. pop = "T"; txtNode = document. createTextNode (nextNode); cell. appendChild (txtNode); row. appendChild (cell); $ ("suggestBody "). appendChild (row) ;}}// clear the existing table data in the div function clearNames () {completeBody =$ ("suggestBody "); 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 the 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;} // set the data function completeField (cell) {inputField in the search box. value = cell. firstChild. nodeValue; // set the search box to clear the selected data Names (); // clear the existing table data in the div} // used to set the hidden document. onmousedown = function () {if (! Event. srcElement. pop) clearNames ();} // enter 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 codeThe Code is 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"];/* You can search databases and perform other related operations in the actual project, this simplifies */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 [] {' # '}) ;}}}
I have passed the test of the above Code. Copy, paste, and run it.
I just saw an article saying, "The pain of real-time search is far greater than the help it brings. This is why Google Suggest is still in beta testing and not on the homepage. When searching on Start.com Live.com, you cannot use the return button to view the previous search or previous page. Maybe no one has done the job yet, but it should be difficult, at least not knowing it, or it may cause more trouble. )". In fact, real-time ajax search is still very attractive. Many websites now have this function. It makes sense to learn.
I hope this article will help you with ajax programming.
Articles you may be interested in:

 

 
  
ASP. NET and Ajax to implement the Search Prompt Function
 
  
Php + ajax real-time input automatic search Matching Method
 
  
ThinkPHP implements an example of the ajax function similar to the search function on the official website
 
  
How to enable search engines to capture AJAX content
 
  
Jquery creates an ajax keyword data search implementation idea
 
  
Php + ajax do imitation Baidu search drop-down automatic prompt box (with instances)
 
  
Google AJAX search API implementation code
 
  
Asp + ajax code similar to google search prompts
 
  
Code for implementing the Smart Search function using asp.net and ajax