Coding an AjaxPro.NET Based Search Engine for Your Website - Optimization
(Page 3 of 4 )
At this point, we have accomplished our original target-building an AjaxPro.NET based search engine inside our own website. However, there is at least one aspect that deserved to be optimized. In the above solution, we, through the "onkeyup" event of an HTML <input> element, trigger the background searching operation. Is this reasonable?
Let's take the example of a user who wants to search for "ajax" in a real scenario. It may take him one to two seconds to enter four letters, and the final results before him are all related to "ajax." Nevertheless, according to the solution introduced above, the background will execute an inquiry four times. This is because the "onkeyup" related event handler will be triggered four times when the user enters "ajax." Obviously, this is unreasonable; it puts a leaden burden on the server side which quite contradicts the original intention of AJAX.
In fact, during the course of the user quickly entering the search words it's unnecessary to send out the search request when the user does not care about the results. It's only when the user finishes entering the search words that it makes sense to send out a request to the server side. Thus, we can do some optimization: instead of using the "onkeyup" event handler to trigger the background search action, we can adopt the more active solution of making a comparison every x seconds (say the time interval is set to 100 ms). If the system sees that within 500 milliseconds the value within the HTML <input> element does not change and that the value differs from the search key word associated with the current retrieved results, then the system draws the conclusion that the user has altered the search key words and the new ones have been completely entered. At this point, it starts to send out a request to the background server side.
Now, let's delve into the process of optimization.
First, we add three global variables: curWord, lastValue, and diffCount, whose functions are detailed and explained in the following code:
// global variable, used to remember the retrieved words related to the current searched result
var curWord = "";
// global variable, used to remember the last time checked result
// we set this variable to prevent it from sending out much too frequent requests during the course of the user entering a string of words
var lastValue = "";
// global variable, used to remember the comparison result between the current entered value and current retrieved value
// add 1 if different, or else set to 0
var diffCount = 0;
Next, we define a checkInput function. This function is responsible for checking out the value of the <input> element. If the current value of this <input> element differs from that retrieved currently and is identical with the one checked last time, then the value of the diffCount variable is added to 1. If the value of the diffCount variable is added to 1 for 5 continuous times then its value must be greater than 5, when a request will be sent out to the server side-perform the inquiry and finally show the results. The following gives the complete source code associated with the checkInput function:
function checkInput(){
var val = el("searchword").value;
if (val != curWord && lastValue == val){
diffCount++;
}
else
{
diffCount = 0;
}
if (diffCount > 5) {
diffCount = 0;
curWord = val;
GetResultXml();
}
lastValue = val;
setTimeout("checkInput()", 100);
}
Moreover, there is also one point that needs to be optimized. In the above solution, up to now, we have not added a hint message to show the number of the articles that meet the search condition. So, we work out another helper function, named GetResultCount, and also its server-side counterpart, the Ajax method "MySearchEngine.GetResultCount" which was mentioned before. Thus, here we only list the client-side function:
function GetResultCount(){
var strWord = el("searchword").value;
var count = MySearchEngine.GetResultCount(strWord).value;
el("resultcount").innerHTML ="There are totally " + count + "articles that meet
the searching condition.";
}
Here, we first get the value of the <input> element. Then we invoke the server-side function "MySearchEngine.GetResultCount" synchronously to get the number of articles that meet the search condition. At last, we display the matching number-related message to the users.
Next: Finishing Up >>
More .NET Articles
More By Xianzhong Zhu
/ 10 
