One of the best uses of asynchronous page processing is for searching. Having a user enter criteria, click search and wait for the page to reload is unnecessary. Most of the page hasn't changed anyway so why waste a trip to the server just to show some search results?
To take searching on step further, why bother having users type in their search critiera and mouse over to a search button. In certain scenarios, it makes sense to provide live search results as the user is typing. This approach works in scenarios where the server doesn't have a lot of overhead when processing the search query. In this case, we're querying a short list of employees so there isn't a lot of processing happening on the server.
The problem with live search results is the unnecessary searches. If a user wants to search for Andrew, we don't want to make six trips to the web service: A, An, And, Andr, Andre, Andrew.
The native setTimeout and clearTimeout functions can be implemented to limit the amount of times we query the server.
See Demo Download Project Files
The Search function does the actual invoking of the web service.
1: function Search(criteria)
2: {
3: //record search
4: $('#divSearches').html($('#divSearches').html() + 'Searched for: ' + criteria + '<br />');
5: lastSearch = criteria;
6:
7: $.ajax({
8: type: 'post',
9: url: 'http://andrewpoirier.com/WebServices/Service.asmx/SearchEmployees',
10: data: 'criteria=' + criteria,
11: success: function(result){
12: PostComplete(result);
13: },
14: dataType: 'xml'
15: });
16: }
Search has three steps.
1. Records the search and displays it in the divSearches container.
2. Sets the lastSearch variable to the criteria argument.
3. Invokes the web service.
This function could be hooked right up to the textbox OnKeyUp but the problem is that it would invoke the web service anytime any button is pushed. This includes backspace, space and other characters that don’t warrant a roundtrip to the server. What if I search for Andrew, and then erase it using backspace. The service would be called six times: Andre, Andr, And, An, A, [Blank]. To avoid this, there will be a function that sits between the textbox and the Search function.
1: function SearchForEmployees(obj)
2: {
3: if (obj != null)
4: {
5: var criteria = obj.value;
6: if (criteria != null)
7: {
8: if (criteria.length > 0) {
9: if (criteria != lastSearch) {
10: ClearSearchTimeout();
11: serviceTimeout = window.setTimeout("Search('" + criteria + "');", 500);
12: }
13: }
14: }
15: }
16: }
17: function ClearSearchTimeout()
18: {
19: window.clearTimeout(serviceTimeout);
20: }
The SearchForEmployees function I assigned to the onkeyup event of the search textbox, like this:
1: <input type=”text” id=”tbxSearch” onkeyup=”SearchForEmployees(this)” />
Let’s deconstruct SearchForEmployees.
1: if (obj != null)
2: {
3: var criteria = obj.value;
4: if (criteria != null)
5: {………
Once the criteria is present in the criteria variable, there are two reasons not to perform the search.
1. The criteria variable is blank (if (criteria.length > 0)).
2. The criteria variable hasn’t changed since the last time a search was performed (if (criteria != lastSearch)).
Now that the criteria has passed all the tests, the search is performed. The Search function is not called instantly. Using the native window.setTimeout function, a 500 millisecond wait delays the calling of the Search function. The function call is assigned to the serviceTimeout variable. If the user continues typing, we only want to perform one search when they are done typing. A half-second delay is a good mix between waiting for average user to type the next letter and not delaying search results noticeably.
Before any search is started, the ClearSearchTimeout function is called to cancel previous timeouts assigned to the serviceTimeout variable.
1: ClearSearchTimeout();
2: serviceTimeout = window.setTimeout("Search('" + criteria + "');", 500);
If 500 milliseconds passes without the ClearSearchTimeout function being called, the web service will be invoked and the page will display the results.
See Demo Download Project Files
Compatability
Project Files: LiveWebServiceUsage.zip (28.19 kb)
Subscribe