 |
Breaking
eBusiness and Search News |
|
 |
AJAX And Server Side Search
I've blogged before (or at least think I have) about how to do client side filtering/searching of data with Spry. An example of this is the search at RIAForge.
The concept is simple. Load your dataset. Then simply filter against this dataset. RIAForge lets you filter both on the keyword you enter and the category. While this does require some JavaScript work, it is still pretty darn simply in Spry. (I encourage you to view source on the page.) However, there are a few drawbacks to this approach.
The first problem is that you have to load the entire dataset. This works ok for small sets of data, but once you get to a large dataset, it isn't practical to load everything into the client. RIAForge's search is actually getting a bit close to that now.
The second problem is that your limited to searching with JavaScript functions. While JavaScript lets you do basic comparison, substring, and regex checks, you can't do some of the more fancier searches you could do on the server side. A great example of this is Verity. Verity has some kick butt/super ninja style cool search styles. None of which are available to you in JavaScript, and all of which could be very useful to your users.
So can we use AJAX and search side search together? Sure! Consider this demo:
http://ray.camdenfamily.com/demos/sprysearch/
This demo uses AJAX to call the back end and pass in the search terms to ColdFusion. Now in this simple demo I am just going a simple SQL statement. It could very easily have been handled by JavaScript. But I'm searching against nearly 2000 records. I certainly would not have wanted to load that into the client.
While you can view source and see everything, let me point out a few interestings aspects. First off - this is the code fired when you hit the search button:
function search() {
var searchvalue = $("searchterms").value;
if(searchvalue == '') return;
dsResults.url = "search.cfm?term="+escape(searchvalue);
dsResults.loadData();
}
I grab the search value from the form field, and if it isn't blank, I update the URL of the dataset and tell Spry to load it. Pretty simple, right?
The only other fancy thing I do isn't even really related to this blog entry, but I'll point it out anyway. I wanted to always show something when you searched, even if your search turned up nothing. (Try searching 'purple monkey blueberry muffins'.) I wrote a simple observer that runs when the data is done loading from the back end.
var myObserver = new Object;
myObserver.onPostLoad = function(dataSet, data) {
var results = $("resultText");
var total = dataSet.getRowCount();
results.innerHTML = "Your search returned "+total+" result(s).";
};
dsResults.addObserver(myObserver);
Pretty simple I think. I basically cut and paste the code from the documentation for observers. Basically I'm telling Spry to run this function when my dataset gets loaded. I call the getRowCount() function and then use that to display the total count of the results.
As a follow up to this article - I think I may actually switch to using Verity and see if I can find a nice way to return the suggestions data!
Comments
Tag: AJAX
View All Articles by Raymond Camden
Receive
Our Daily Email of Breaking eBusiness News
About the Author:
Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com
Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.
 WebProNews RSS Feed
More Expert Articles Articles
Contact WebProNews |
|
|
 eBUSINESS
RESOURCES |
|
|
 |
|
| About
WebProNews |
WebProNews is the number
one source for eBusiness News. Over 5 million eBusiness professionals read
WebProNews and other iEntry business and tech publications.
WebProNews provides real-time coverage of internet
business.
Free Email Newsletters:
|
|
|
|
