Monday, August 17, 2009

Javascript Client Side Search Grid Control

Alright, this is long overdue, but I've finally created a sample project for a bit of code I've found very useful over the course of the last two plus years. This code is a generic method of searching a sizable amount of JSON data on the client side. I've made many optimizations to this codebase over the years, but I figured that I should start at the beginning and share the ways that I've optimized this control. I think this should illustrate a common process for many of us, in that this project fulfilled a simple need originally, and then as the scope increased and changed, I had to expand upon the flexibility and extensibility of the control.


Originally, I was tasked with a simple side project of making a one off web app to search contact information of the company I was contracting for internally. The one strict requirement was that the search be full text search, such that if the text entered on the client side matched any portion in any position of the row, it would be displayed. I started with a normal database search, but when I saw the amount of data being searched, I wondered if it wouldn't be prudent to constrain the app to the client, and just search and load the results as the user was typing.


I took a small amount of JSON data and made a prototype app to search it. When I saw the speed with witch it took the search code to find a match, I realized I had hit upon something. I expanded the amount of data, and saw that even with a full search with multiple tokens on the JSON dataset, the searching took milliseconds on the client side, with even modest requirements.


With the version that I am posting right now, the capability of the existing code to search client records takes a very negligible amount of time on around 5k records instantaneously. In the most recent incarnations, the size of the search-able JSON dataset is approaching 40k plus rows with 7+ columns. That seems like a very useful tool when you consider JSON data cached from external links. With URL rewriting and some other optimizations, I foresee the code being able to search tens of thousands and potentially hundreds of thousands of records near instantaneously on the client side.


Needless to say, this kind of technology could make sites like Google infinitely more accessible. An intuitive way of searching data instantly would be a boon for many users, especially once they grasp the capabilities of such a system. I have started writing a series of posts to come after this one on the various ways I have upgraded and extended the code. I hope to post them soon. Oh, also, within the next week I'll have a demo area up too, that way you can see what the code is doing.

You can download the project here.



dbo
Hey Now Jeff, Nice to post & it was good to speak with you tonight. Thx 4 the info, Catto

Leave a Comment

Name (required)

Email optional

Home Page

Comments

RSS Feed
Blog Roll
Resources
Live Traffic Feed
Archives
Affiliates