Edit: 4/12/06
I'm going to make this available as a download as soon as I have it cleaned up. See here for more details.
Edit: 4/21/06: It is now available - More Information
Tonight, I was able to get my category AutoComplete feature working using AJAX in ASP.NET. I have a query text box that fill the matching categories into a textbox as you type, similar in idea to Google Suggest.
Here's how it works..
As you type, the onKeyPress event is triggered, sending the query back to the server in the background. On the first call of the page, it checks the Cache to see if the category list is already loaded. If not, it goes out to the database and loads it into a Generic List object and then saves that object into Cache. If it is located in Cache, it just grabs the Cache Item, casts it to List<string> and uses that.
Then I take what the user has typed so far and use List.FindAll() to find all matching values. Since it's coming out of memory most of the time, it's pretty fast. There also aren't many categories, so even when it needs to go out to the database, it doesn't take too much time. Once it has all of the matching values, they are concatenated with commas and sent back to the client side.
The Javascript then takes that string, splits it along the commas and adds a new line to the textbox.
function fillAutoComplete(result, context) {
fields=result.split(',');
var txtAutoComplete = getObj('AutoComplete');
txtAutoComplete.obj.value='';
for (var i=0; i<fields.length; i++) {
txtAutoComplete.obj.value += fields[i]+'\n';
}
}
Currently, I have it just filling a textbox for test purposes, but eventually, it will be in a clickable dropdown. The key to this is making it easy for the user to select a category of food to either add to their daily diet tracking or for the classification of custom foods. This UI interface is a great blend of browsing and searching. As you type, a search is performed which progressively limits the items you have to browse through.
It's coming along.. slowly, but surely.
If you liked this post, please be sure to subscribe to my
RSS Feed.
