Wednesday, August 29, 2007

Ajax-like live-search in the client

This one was harder than I initially had hoped, and it is still just a proof of concept at best.






>> Download Demo Application

I built this demo on top of Jake's Fake Names application. The "autocomplete" performs a DbLookup based on the value of the field the user types in. Then a HTML (Pass Through) table with links is created from the result. Since the Notes Client is sooo dynamic when it comes to HTML, I just have to restart the universe reload the frameset to refresh the generated table of results.

I couldn't get this to work in a useful manner when not in a frameset, because I can't figure out how to set the pointer to the end of the query-field when not in a frameset. This results in the pointer always going at the start of the query-field when "reloading" the form.

E.g.:
User types: abb
Field value: abb
Refresh/lookup
User types: ie
Field value: ieabb

If you're downloading the demo:
All elements modified/created for the demo contains "DontPanic Demo" in the comments-column.

The first lookup may take some time, as the view-index has to be created in the lookup-view.

If you want to try out fixing the autocomplete when not in a frameset, I've made a non-frameset form, "AutoComplete". If you find a way to set the pointer at the end of the query-field, please let me know how, and I will fix the demo-application.

I spent WAY(!) more time than planned to make this demo (work), so please don't hate me for not cleaning up unused code, documenting code and design elements, etc.

The file-size of the demo-application is 6.66 MB according to Windows Explorer, so beware modem users and superstitious people!

Update: I originally called this post "Ajax-like Autocomplete in the client", but the functionality is most like live-search. Sorry about that.

4 comments:

Jake Howlett said...

Cool. Nice to see Rockall mentioned so many times ;o)

I get a lot of people ask me "I like this code, how can I do that in the client?" about what I do. I always say I don't know or that I think you can't. Looks like my opinions of what can and can't be done in the client needs updating...

Jake

Tommy Valand said...

The FakeNames database is great for testing out stuff in. I don't mind doing a bit of "free advertising".

Until I read the german presentation on PassThrough HTML /CSS in the Client I was as blank as a sheet.

After skimming through it, the ideas started pouring.

The "german guys" also have a demo-database of Pass Through HTML.

Original presentation and Demo-DB: http://www.visol.de/pages/ec2005.htm

Chris Toohey said...

GREAT STUFF Tommy - but I'm starting to sound like a broken record here...

You're doing some really amazing stuff in the Lotus Notes client - looks like the rest of us are going to be playing catch-up to match this latest slickness ;-)

Tommy Valand said...

Thank you Chris!

It's fun to experiment in the Client because it's such a limited platform (at least UI-wise) compared to the web-browser, which I spend 99.9% (if you disregard scripting agents and script libraries) of my work hours on.

I keep (and update) a list of stuff I wonder if is possible/I want to try out in the Client. The list is growing, so I'll probably keep blogging for a while. :)