Wednesday, February 13th, 2008
Category: LiveSearch
, jQuery
Remy Sharp has revived the jQuery API browser at a new location. The old API browser hadn’t
been updated since 1.1.3 and most other API browsers were running from the old doc structure (e.g. gotapi.com/jquery).
Remy added live searching and direct linking.
Friday, June 15th, 2007
Category: Screencast, LiveSearch
TV Links DB is the site for you if you are into the telly. It will search 71548 links to your favourite TV shows in a split second using a nice live search.
Tom Wilson made it very clean, simple and fast.
Monday, June 4th, 2007
Category: Utility, Showcase, LiveSearch
We have all been there. Trying to remember the darn HTML entity required. You can try to scroll through the massive list, or you can use a new tool by Remy Sharp that lets you type in a character that looks kinda like the thing you want.
For example, if you type in “c” it gives you all the HTML entities
that look a bit like a letter “c”. These include: ¢, ©, ç,
⊆, ς
Imagine that. Something that actually tries to help.
Thursday, September 7th, 2006
Category: Articles, LiveSearch
Peter Forde has written a piece on re-inventing search with a Live Filter pattern.
The article talks about his reasoning behind filtering vs. alternatives like Live Search, and ends with a Live Filter demo.
Implementation
Many of the concepts in this article would be very difficult to implement without Ruby on Rails. Rails introduces the concept of Partials. Partials are nothing more than snippets of fully formed XHTML which get inserted into the innerHTML of objects in a browser’s DOM by JavaScript. The specifics of this process are outside of the scope of this article. While you can update the innerHTML of a DIV or SPAN using any Ajax-capable scripting language such as PHP, there is an architectural elegance that enables this filtering system that we believe would be difficult to replicate.
Implementing a filter system that works across all common browsers is a real challenge, full of gotchas and necessary hacks. While nothing here is offensive, you might be surprised at how involved it can get. The reason being that it is of paramount importance to maintain the function and behaviour of the browser’s built-in Back button.
There are two main issues to solve. First off, if you modify the contents of your DOM with Ajax and JavaScript, move to another page, and then return to the form submit page, each major browser seems to corrupt the state of elements on the page in subtle and different ways. For example, Firefox will corrupt the selection state of checkboxes generated at run-time! The second problem is that if a user returns to the search interface with the Back button… what is the user going back to? Suddenly our flow diagram just got a lot more complicated!
The first revelation is that you should be prepared to write client-side functions to persist, restore, and clear the visual state of your filter. When you render the interface, all of your elements will be in their default state. During your document’s onload event you will want to execute an initialize function that can then “hydrate” the state of your elements from a hidden form. Likewise when submitting a query, you will not want to process the data associated with the form elements you see. Instead, “de-hydrate” the state of your interface into data on a hidden form that can be easily passed on.
During the initialization process, you will need to generate a new key value that could be assigned to a query request should one be submitted. You will use this value to build the action attribute of the hidden form that they might submit! This does need to be performed dynamically, in case the user has returned to a previously rendered page with their back button. Browsers can simply not be trusted to clear their page caches, no matter how many META directives you push down in your HTTP header.
One behaviour we’ve evolved while iterating this filter pattern is to remember the state of the last search when returning to the search page via navigation — unless the user specifically clicks on a major site navigation link to go to the search page. We interpret this behaviour as expressing a desire to start a new search from scratch. You’ll want to experiment and see what feels right for your project. These sorts of decisions are subjective and might change with feedback.
Monday, February 27th, 2006
Category: PHP, LiveSearch, LiveEdit
Lots of comments have been flying around about a new completely “from the ground up” implementation of a blog that’s, as they put it, “fully buzzword compliant (AJAX, RSS, Web 2.0 - it’s all there)”.
The Logahead blogging engine offers many of the regular features that blogging software provides, but has been reworked to make it simpler - ease-of-use is key. To achieve this level of simplicity, the entire blog can be maintained directly from the homepage, logins/protected content and all. They support tagging for each entry, draggable/sortable widgets for the sidebar, an “admin toolbar” that loads when an authorized user logs in, inline post adding and editing, livesearch, RSS feeds, easy text formating, and much more.
Most importantly, you can check out a demo of the app here.
You can get all of the deatils on the software at their site, including support and a forum to interact with other Logahead users. Currently, the download is a beta version (version 1.0), and requires PHP and MySQL to get up and running.
Tuesday, January 24th, 2006
Category: Toolkit, Examples, LiveSearch
Jeff Chausse has created MyBigRiver.com, a quick and easy search engine for all of Amazon’s products. If you’ve ever gone through the dance of looking up a book on amazon, trying to clean the url, copying and pasting the image url, and then copying all that stuff to your blog, you will like this tool. Just start typing your search query, and append a keyword on the end to help limit the results - i.e. “Pragmatic Ajax book”.
Note that there is a referral code for MyBigRiver appended to the links provided, which you may want to strip out to append your own if you are in the Amazon associates program. I think Jeff could provide more value if he allowed users to append their own referral id, but he is the creator so he can certainly monetize it how he likes. I’ll stick with wp-amazon until there is a nice option to store my own referral id so I don’t have to edit the generated urls by hand.
Monday, January 9th, 2006
Category: Showcase, LiveSearch
egoSurf is going after the people that Google themselves. You can admit it!
It does a nice job of running searches in the background, and constantly letting you know where you stand, and the progress.
At the end of the job, it even comes up with Flash dials to give you a context to your “ego points” which don’t mean much as a number.
Wednesday, January 4th, 2006
Category: Showcase, LiveSearch
Extra Tasty is the latest site by Skinny Corp.
This community surrounds Alcohol, and shows you why Web 2.0 is here. We need to make things easier for alcoholics to use the web!
There is definitely room for more Ajax on this site, especially around the collaboration features.
Sunday, November 13th, 2005
Category: Showcase, LiveSearch
FlightAware is a site that lets you track flights, and get analysis.
You can see live information about all flights that are going on, narrowing in on particular flights, or airports.
There are numerous ajax features, including a lot of live search features.
One interesting UI choice is telling the user “keep typing, I need more information” on the live search side. This is in comparison to doing a live search with one letter (too many results), and not showing anything until the magic number of letters is typed (e.g. three).
Oh, and it’s kinda fun to just click around and see what is going on up there :)
Monday, October 10th, 2005
Category: Showcase, LiveSearch
We loved Google Suggest, the Ajax mother compared to Google Maps, the father.
Then we saw Yahoo! Instant Search, which was ok….
But now we have the best of both worlds, with a sleek Son of Search: Inquistor Instant Search.
It gives you both “are you looking for” info a la Google, and search results a la Yahoo…. but for each search!
It looks like Apple designed this puppy doesn’t it? :)
Friday, September 16th, 2005
Category: LiveSearch
Yahoo! has released an Instant Search Beta that searches via Ajax as you type.
It differs from Google Suggest in that it isn’t queries that are shown, but actual search results.
When I played with it, it was a little hard to know when it was going off and doing things, and the results were average and too few.
Why feel lucky when you can be right? With Instant Search, find the information you want — without even hitting the search button. Results instantly appear for Yahoo! Shortcuts and common searches.
Monday, September 12th, 2005
Category: Library, Component, Prototype, LiveSearch
Chris van de Steeg has upgraded his fork of LiveGrid so that it has xslt support and improved scrolling.
Full Feature List
- We can still produce any HTML, in stead of fixed table-rows
- We now have XSLT support!!! I’m really happy with this one. It allows to have
any xml source as dataset for the grid. Just before it gets placed into the grid for viewing, you can do some xslt magic on it. Just have a look at the source of the yahoo demo to see how it works. This demo will take the literal html of the yahoo-api and gets parsed by our own xslt.- Auto-size. the livegrid can automatically do calculations and resizing if the grid is empty on forehand. This way your HTML page doesn’t need to know the exact row-size that will be returned by the
- Instead of keeping a set of rows in the buffer, we keep the xml-source in the buffer, and any newly loaded source is merged with the first one. For merging that is not-standard, you can specify an xpath to select the rows that should be buffered & used for display.
- And ofcourse, last but not least, the reason why I started the fork in the first place: the scrollwheel support!
Source and Downloads
Friday, September 9th, 2005
Category: Java, LiveSearch
The Struts-Layout tag library now allows you to put Suggest fields on your web
pages:
It is very easy to use:
You only have to use a simple JSP tag:
<layout:suggest suggestAction=”/getCountrySuggestions” key=”Country”
styleId=”countryField” value=”" />
where “/getCountrySuggestions” is a Struts action in which you instantiate a collection containing the results matching the typed word.
You can easily custom it:
You can use different skins, set the maximum number of returned results, set the timeout or the minimum number of typed characters before getting results…
How to use Suggest field:
Read the tutorial: http://struts.application-servers.com/suggest/index.html
More about Struts-Layout:
Struts-Layout is a tag library for struts which provides easy and fast interface
creation. This is achieved by powerful tags which display panels, input fields,
tables, treeviews, sortable lists, datagrids, popups, calendars, etc. With those
tags, the developer have neither need to write nor even know HTML.
Struts-Layout website: http://struts.application-servers.com/
You can find an online demo
( via François Goldgewicht )
Tuesday, July 19th, 2005
Category: Component, Showcase, LiveSearch
A new site, Ajaxed.com, gives you the ability to customize a Google Suggest-like ajaxian component for your use.
It will be interesting to see their next components are.
Thursday, June 16th, 2005
Category: Component, PHP, LiveSearch
Google Suggest was a close second to Google Maps in terms of its impact in my own web UI design. I had no idea that sophisticated auto-completetion could be done round-trip to a server fast enough to deliver a good user experience.
If you’re doing Ajax on PHP, you can learn how to implement Google Suggest by reading Quentin Zervaas’ article:
I’ve just published an article on my PHP article site about
developing a clone of Google Suggest using my AjaxAC framework…
The article is at:
http://www.phpriot.com/d/articles/php/application-design/google-suggest-ajaxac/index.html
Monday, June 6th, 2005
Category: Ajax, JavaScript, Component, Showcase, LiveSearch
Duncun Ponting lead me on to the del.icio.us recent change.
They have added some nice ajaxian components to help you select tags for content. It is nice for them to show you what others have tagged, as it will probably help the community from using different names for everything, which makes it harder to grab info. Ignoring plurals and the like would be nice too :)
Post something to your del.ico.us account to see it in action.
Keep up to date on Ajax content via Twitter
In Episode 25, we chat about IE 8, standards, Acid3, server side JavaScript, and more.
Who are the ajaxians? Find out.
Please contact us at . We would love to hear about any news that we could put up here.
We have individual blogs too:
