SRCHR - A Client-Only YQL-Powered Search Engine With jQuery

Posted April 4, 2010 at 11:37 AM by Ben Nadel

Tags: Javascript / DHTML

A couple of weeks ago, YayQuery podcaster, Rebecca Murphey posted a blog entry about a project called SRCHR. This was supposed to be a 100% client-side search engine powered by YQL (Yahoo Query Language) and jQuery. The idea behind this post was to crowd-source the development of such an application such that we could see the various ways in which different people might approach the same thick-client problem. This kind of development is something very new to me, so I thought it would be a very valuable experience to have. The following is a demo of my SRCHR solution (which you can try for yourself):


 
 
 

 
SRCHR - A Client-Only, YQL-Powered Search Engine With jQuery.  
 
 
 

My solution is not feature-complete. The application is supposed to cache the "recent queries" list across page refreshes; but, local storage is not something that I have worked with before, and honestly, I need to get back to preparing my Scotch On The Rocks presentations. As such, the code allows for a pre-defined list of recent queries, but does not provide any caching mechanism.

The search interface was supposed to be easily scalable, so I tried to build the various components with as little coupling as a I could. Both the search form and the search results are passed a collection of search engine instances that are used to build the UI. In this way, the various interfaces have no preconceived notion of what they are supposed to support and will scale as the collection of search engines changes.

The actual searching is performed by various "Search Engines" that implement a core SearchEngine class and return a unified "search result" data format. Using a unified data format, I figured I could easily add search engines so long as they knew how to normalize their inherent search results to fit into the agreed-upon data format. The actual display of the data is handled by the search results controller. As such, the search engines don't have to know anything display and the search results controller doesn't have to know anything about the search engines.

Like I said, this kind of development is way outside of my comfort zone, so I am sure there is a ton of room for improvement. If you'd like to look at the code, feel free to download it here.




Reader Comments

Apr 4, 2010 at 3:18 PM // reply »
13 Comments

Great job man, I especially like your implementation of "Engines"... Dig it!


Apr 5, 2010 at 9:31 AM // reply »
11,238 Comments

@Garrett,

Thanks my man. As I was building this, I thought it would be an awesome project to see how people accomplish the same thing in FLEX. Maybe I can get someone to review this with me as part of my "FLEX On jQuery" series.


Apr 11, 2010 at 4:03 PM // reply »
54 Comments

I believe this feature complete: http://drewwells.net/demo/srchr/

Thanks for posting about this, it was a lot of fun building the site. I'm with you on the client side stuff, I looked over some of the localStore/sessionStorage implementations, but I was not willing to wrestle with that. Query caches are just stored in an internal structure.


Apr 12, 2010 at 10:12 AM // reply »
11,238 Comments

@Drew,

Looks good my man. Don't forget to post a link to it on Rebecca Murphey blog post (linked in my blog post) as she is the one who organized the project.


Tom
May 10, 2011 at 11:45 AM // reply »
1 Comments

The video on YQL-Powered Search Engine With jQuery was awesome! It was well presented.


Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:


Author Email:

Author Website:

Comment:

Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
May 20, 2013 at 4:38 PM
Using A Dynamic Column Name With ValueList() In ColdFusion
@Dana, Your confusion is well founded, since this is a very confusing features. In fact, it ONLY works if you use array notation. Meaning, that this: arrayToList( query[ "columnName" ] ) ... read »
May 20, 2013 at 4:34 PM
Using A Dynamic Column Name With ValueList() In ColdFusion
I was thinking chicken and the egg, I wouldn't have expected it to work in the valuelist going in I guess. Maybe I just need a beer, long day :) ... read »
May 20, 2013 at 4:29 PM
Using A Dynamic Column Name With ValueList() In ColdFusion
@Dana, That's if you're trying to reference a specific row. In this case, we're trying to reference the entire query column as one cohesive value. So, you are correct that if you wanted to output a ... read »
May 20, 2013 at 4:24 PM
Using A Dynamic Column Name With ValueList() In ColdFusion
I thought when you used array notation to reference queries you always had to have the row or it would throw a similar error as well? ... read »
May 20, 2013 at 11:45 AM
Using jQuery's Animate() Step Callback Function To Create Custom Animations
This is really useful. I found out that you don't actually have to use a dummy css property (surprisingly). To animate a property in a linear-gradient for instance I did this this.css('someLinearGra ... read »
May 20, 2013 at 10:51 AM
Using A Dynamic Column Name With ValueList() In ColdFusion
@Josh, Oh snap! You're totally right! I'm not sure I've ever tried that. I did know that you can call a number of other array-methods on ColdFusion query columns: http://www.bennadel.com/blog/167 ... read »
May 20, 2013 at 10:45 AM
Using A Dynamic Column Name With ValueList() In ColdFusion
@Ben - I believe you can achieve the same functionality with ColdFusion's built in ArrayToList() function. ArrayToList( users[ "id" ] ); ... read »
May 20, 2013 at 10:21 AM
My Experience With AngularJS - The Super-heroic JavaScript MVW Framework
Is there any error logging and handling framework in angularjs, if not then in what way I can do this. ... read »
InVision App - Prototyping Made Beautiful With Prototyping Tools