This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Live Search and browser woes

17th September 2004

Inspired (truly inspired) by Apple’s forthcoming Spotlight tool (below), and the Live Search tool created by Chregu over at Bitflux, I’ve implemented a similar search method here on CollyLogic - but not without running into browser issues (it doesn’t work on my Firefox, or on IE Mac, or on early versions of Safari). This is all purely experimental at the moment, but feedback is appreciated. Read on for more…

image
image

What does this Live Search do then?

Well, if you type a letter into the search box in the sidebar, the system will automatically pump out ten blog entry titles containing that letter. As you type more characters, the list automatically refines the results. It all happens on the fly, and (so long as you have Javascript enabled) it’s a mighty-fine search method. Try typing ‘ice’ letter-by-letter and see the results list develop below the search box. There are still a few teething problems though. If you use your ‘back’ button, you’ll find that the thing stops working. Also, once in a blue moon, you get a ‘no results’ when there clearly are results to be had (this is also down to ‘back button’ abuse). I’m also aware that the ‘ticks’ are doubling-up/looking a bit sporadic/ugly on IE PC. Naturally, it looks fine on a Mac. Let me know if you spot any other probs.

It was by no means easy to implement this with my CMS, but it does seem to be working. I had to force it to not search in certain sections, and point the results at the appropriate ‘comments’ page etc. Still, this is all done, but the horror of getting the list-style to work properly was causing me grief. Each item is pumped out with <li> tags on either side, as I need. But specifying the <ul> within the <form> element, and within the PHP and javascript, and making the whole thing validate was a nightmare.

Do you want it? Ooh, Sir…

Apparently, Chregu has had a tremendous response to the script, and a Live Search wiki has been set up, where you can access the Javascript, and find more answers. At the time of writing, the browser situation looks like this:

Supported:

  • MSIE 5.0 upwards
  • Mozilla/Firefox (Since at least Mozilla 1.0) although it ain’t working on my copy of Firefox
  • Safari 1.2

Not supported:

  • Konqueror
  • Opera
  • Internet Explorer 5 (Mac)

I’m particularly interested in this Live Search stuff because of the potential use of the script to perform other live functions in tandem with my CMS. Anyway, forgive me for the cathartic waffling this morning - but it’s much better than purely banging my head against the office wall.

Also, check out Garrett’s beautiful implementation of the technique over at Maniacal rage.

Responses

# Kim Siever responded on 17th September 2004 with...

Very, very cool.

# Jinjiru responded on 18th September 2004 with...

Actually in Konqueror it works quite well - at least at your site, and at Bitflux it was working also but somehow ugly :\ (Konqueror 3.2.92)

# Etienne responded on 18th September 2004 with...

Thats a cooool function. I just love it.
Thanx.

# tig responded on 19th September 2004 with...

Works fine in Firefox 1.0PR (Mac).

# jesus gollonet responded on 20th September 2004 with...

it works fine in my firefox 0.9.1 (mac) too.

and it’s sooo cool.

great work. thanks.

# Keith responded on 20th September 2004 with...

Very, very cool and I can see how that could be very useful when coupled with well titled entries.

# Chris Fenison responded on 23rd September 2004 with...

Looks and works great for me using Safari 1.2. I hope to someday implement something like this on my site. You continue to inspire. Keep up the good work.

# Leonard responded on 2nd October 2004 with...

Works fine on my Firefox 0.9.3 (WinXP)

# Pascal responded on 7th October 2004 with...

My first time here. Looks great and works just fine with my copy of Firefox 0.93. Those checked links is also pretty cool. Wonder how you do that?

# Pascal responded on 7th October 2004 with...

Forget my earlier question. I actually tried the live search. Duh! and found the link to the ticked-off links tutorial. Pathetic me. Cheers.

# Dave Child responded on 19th October 2004 with...

I saw this in action and loved it. However, I also use Opera. And LiveSearch using the XMLHttpRequest object doesn’t work in Opera. And some people are unable to search normally, etc etc.

So I’ve come up with an alternative version. It doesn’t use IFRAMES, or the XMLHttpRequest object, doesn’t have problems with back button usage etc. Unfortunately, it’s not as slick as a result, but I like it :)

The version I’ve done isn’t written up properly yet, but what is there is at http://www.ilovejackdaniels.com/resources/livesearch/ - and it’s working there as well, on the right. Tested in IE6, Opera and Firefox so far and seems fine.

# Hilton Santos responded on 17th January 2005 with...

Hello
Looks ok, to bad it does not auto complete a possible search IN the search box.
www.dbcombo.net is similar…

Yours Truly

Hilton Santos

www.polorentacar.com

# matt responded on 24th January 2005 with...

hiya,
lovely livesearch implementation.

hope this is the right place to report IEisms!

using live search, noticed that the tick/arrow background image is so efficient m -(vertically arranged images with probably only 1 or 2 pixels between symbols)- that if an individual result spans two lines, instead of a single tick, I see two arrows and half a tick instead of one right pointing arrow

... but then I am using IE6 on xpsp2pro!!

thanks for the inspiration. :)

# Dave responded on 2nd June 2005 with...

Hmm doesn’t work in either of my copies of firefox (1.0.3 or 1.0.4) how strange works on my freinds copy :S not a clue

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 287 Next

Superfluous Aside

Archived in Design & Web

There are 14 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.