LiveSearch

You may have noticed the ‘LiveSearch’ form I’ve recently added to the right-hand column of this site (on the main index). If you start typing a phrase or string into the text field, you should see a ‘live’ list of results rendering below the text field. Keying down (and up) will allow you to scroll through the results. Hitting return (or enter) will take you to the selected post. If keyboard navigation doesn’t work (Mozilla seems a little flaky), use the mouse to click on a result.

The cleverness is done using a cool feature called XMLHttpRequest. Reading up on it led me to this weblog post at Bitflux, where it’s used to create a find-as-you-type search engine.

The gist of it involves some clever javascript which use the XMLHttpRequest object, detect keystrokes and render some DIVs, and a PHP script which queries a MySQL database and writes out an XML file. Put it all together, and it creates quite a funky little web application. The great thing about the XMLHttpRequest object is that it can retrieve and submit XML data in the background, without requiring a fresh page request.

Much kudos to Chregu at Bitflux for cooking it all up (and releasing it with an Apache license). For more information, check out this Wiki page.

Posted 5 years, 7 months ago

Holy cow, that’s awesome! :)

Mal · www · 5 years, 7 months ago

it’s fantastic but how does one use it :(

Ujwala Prabhu · 5 years, 7 months ago

Thats pretty cool Phil. I’ll have to have a little play with this!

Andrew · www · 5 years, 7 months ago

Was showing it to the linux-bod in the office and it crashed his browser 3 times. He got to see the effect eventually, but it seems firefox-linux isn’t too happy with it!

Damnit!

Andrew · www · 5 years, 7 months ago

Ujwala – Find the search box on the main weblog page (on the right column). Type a few letters of a word in and you should see some live search results. The results are weblog posts that match your letters. If you’re on IE or Safari, you should be able to key down through the results (hit return to visit the selected post). If you can’t key through the results, use your mouse instead.

Andrew – Crikey, that’s bad news. Works great on Firefox on Mac (though keyboard navigation seems to be broken). I’ve no access to a Linux box so I can’t test it there.

Phil · www · 5 years, 7 months ago

I wouldn’t worry, Linux users are used to being hampered at every available opportunity! Also, lynx doesn’t support js ;D

Andrew · www · 5 years, 7 months ago

It is possible to get key navigation to work in mozilla and ie.

Mozilla interprets whitespace in xml as nodes. So just put <xsl:strip-space elements="*"/> in your xslt file. This will remove all whitepace from the transformed document.

Frank · 5 years, 6 months ago

I am looking for the php script that I can point to my MT 3.11 install to get search results from. Nobody seems to have the source for this small file posted anywhere and I can’t figure out how to do it myself.

TIA.

Relaxedguy · 5 years, 5 months ago

What MySQL database does it query? That’s the part I’m lost on. I’d like to write my script using PHP as well, but need to understand the logic first.

Amit · www · 4 years, 10 months ago

What MySQL database does it query? That’s the part I’m lost on. I’d like to write my script using PHP as well, but need to understand the logic first.

Amit · www · 4 years, 10 months ago

how to use

ckding · 4 years, 2 months ago

Commenting on this post has been disabled.

My name is Phil Lindsay, a web guy from Scotland, now living in Newcastle upon Tyne in England. I also run a web design company called Presence. You can email me at phil@xlab.co.uk, read more ramblings on my Twitter stream and view my photos on Flickr. You can grab the RSS feed for this weblog here.