Blog Posts

Spotlight-like livesearch added

Inspired by Apples new Spotlight feature, I implemented something similar using JavaScript with XMLHttpRequest and a little bit of PHP on the serverside. Just go to the search field on the right and start typing a search word, it should then immediately show the results below. It works on Mozilla, Safari and even on Win/MSIE.

Currently it only searches through the titles of all our posts, maybe I will extend that some day. And I have some more ideas...

Update: There's now a LiveSearch Roundup and a wiki page for the whole project. Please visit them, if you're further interested in the project.

About the author

Comments [54]

Ned Baldessin , 05.07.2004 19:26 CEST

Wow.

The most impressive part is that it's actually instanteneous. Well done.

Patrick , 05.07.2004 21:00 CEST

isch huregeil...

alain , 05.07.2004 22:27 CEST

hammer!

jmk , 05.07.2004 22:47 CEST

impressively fast! where's the sourcecode? :-)

Bill Humphries , 05.07.2004 23:36 CEST

Brilliant!

Asynch requests are a killer technique.

Lon , 07.07.2004 00:35 CEST

What do you mean 'even in Win/MSIE'...
This was possible in IE 5.0 many years before you could do it in any other browser.

Google tells me IE5.0 was released at the end of 1998.
Mozilla supported XMLHTTP in 2001 or 2002 (not entirely sure). Safari will support it in 2004.

IE supported this a century earlier! What am I saying, a millennium!!!

chregu , 07.07.2004 01:24 CEST

Hi Lon

No reason to get upset. It was more a comment in the line of "even me as a well known non lover of IE" got it working or "cool 3 browser happen to share almost the same API".

chregu

Lon , 07.07.2004 01:58 CEST

did i mention it's uebergeil? nice work.

chregu , 07.07.2004 02:04 CEST

hehe. yes, I'm a big fan of this feature as well. Not because I wrote it, but because it shows that browsers are capable of doing much more interactive stuff than what you usually see on the net nowadays.
Will certainly be a standard feature on my future websites.

bb , 07.07.2004 16:00 CEST

Cool!

steve minutillo , 07.07.2004 19:32 CEST

This is completely awesome.

Emil Tamas , 08.07.2004 00:01 CEST

the script source is available if you look in this page's source code and (I'm happy) it's licensed unde a Apache license.
Neat work !

gongadze , 08.07.2004 06:07 CEST

The next step in web-application-development. Thx!

l.m.orchard , 08.07.2004 07:44 CEST

Wow. This is really making me want to check out XMLHttpRequest now, especially since I'm doing some hack nasty things with iframe scripting right now.

pk , 08.07.2004 10:30 CEST

Well : I'm unfortunate to say it doesn't work with Opera. Too bad I guess.

chregu , 08.07.2004 10:32 CEST

As far as I know, Opera doesn't support the XMLHttpRequest method. If it does and someone points me to the specs of it, I'll make it run on Opera as well ;)

Talou , 08.07.2004 18:10 CEST

Cool ! I tried on mine, your code works perfectly !
Very nice trick that can change many things in the web !

Roger , 09.07.2004 00:55 CEST

I am coming a bit late...
but yes. Wow! Supercool!

jarod , 09.07.2004 13:11 CEST

its nice, but as far as i see it only searches through the headlines and not the entire articles.

but still a very neat feature ;]

chregu , 09.07.2004 13:13 CEST

jarod

you're right. But changing the SQL query on the server side wouldn't be a problem. I didn't implement it, because I wanted to check the load first ;)

Bill Creswell , 09.07.2004 15:12 CEST

Wish I understood this x...request thing. This is a cool Idea!

Jeff Minard , 09.07.2004 15:53 CEST

Hi hi!

I thought you might like to know that I have taken this as a basic and have simplified + extended it to be a bit more modular.

http://www.creatimation.net/journal/live-request

Oh yeah, and this f'ing rocks. :D

tamole , 09.07.2004 18:21 CEST

i entered "XMLH" and nothing was found... why? the search should find THIS post...

chregu , 09.07.2004 19:01 CEST

tamole

It only searches through the titles at the moment.
Maybe I'll add Fulltext search later

Jon Bell , 09.07.2004 21:27 CEST

Best thing ever. Wow.

A question, though -- any idea how this could work through frames? Right now you target a div on the same page but what if you wanted this in a frame-based web app like gmail?

I'm sure you can just target document.framename.divname or something, but I've never done something like that before. Anyone have thoughts?

Eric Madsen , 09.07.2004 21:50 CEST

Impressive! -I like.

Where We\'re Bound , 09.07.2004 22:59 CEST (Trackback)

Spotlight-like livesearch in a blog!?
This is cool. Type keywords into the search field on the right and you get instant results for the entire blog. Amazing. Even on dial-up the results are nearly instant.

Brandon Lehmann , 10.07.2004 02:56 CEST

I implemented this on my site the day apple announced searchlight.

I am using plain old javascript and php for the backend. I'm currently using it to search through my iTunes generated music library. I use frames for displaying the results and it works just as fast as your example here.

My method includes just a plain old HTTP GET request so every browser supports it (my version uses iFrames but that can easily be changed). No need for worrying about if a browser supports XMLHTTP requests.

Il Tao dei blog , 11.07.2004 00:03 CEST (Trackback)

Esperimenti
[ loom xmlhttp live search test ] riferimenti: Spotlight-like livesearch added, Live Request : XMLHttpRequest and You

Dan Cornish , 11.07.2004 03:11 CEST

Great idea, but it really only works with result sets that are small. What happens when you type in the letter a and get 4000 records back. The interface does not support this kind of thing. Perhaps the next step is to figure out how to handle large record sets in the interface.

This is impressive, and elegant.

chregu , 11.07.2004 03:14 CEST

Dan

you just don't give 4000 records back (I have a limit of 20 right now) and adding some arrows to support "sliding/paging" shouldn't be a big deal.

But what do you do with 4000 results anyway ;) You will refine your search before you looked through the first 100 ones.

To circle back on what another poster mentioned, IE5.0 indeed had the ability to retrieve XML documents over HTTP before anyone else. That was one of many really really cool features IE5.0 had introduced, including the ability to perform client-side XSLT processing. The problem was that the W3 was lagging way behind in defining standards, and no other browser was up to par, in 98/99. I'm pretty sure oddpost.com leveraged many of those cool features to build their nifty web-based e-mail interface.

Interestingly enough, when I was investigating similar features introduced in Mozilla, much of their documentation gladly acknowledged the fine work Microsoft did with those APIs, and in many cases, they would link straight to the Microsoft knowledge base for certain aspects of the API.

Safari supports XMLHttpRequests *today*. This is not an "upcoming Tiger feature", see this article: http://developer.apple.com/internet/webcontent/xmlhttpreq.html .

This brings us to a very interesting situation. It shouldn't be long before the WebCore enhancements get pollinated down to the Konqeror / KHTML code base, at which point we'll have the following major browser code bases with reliable support for retrieving XML documents over HTTP:

- Mozilla, all forks and flavors
- WebCore
- KHTML
- Win IE5+

I find this all quite exciting 8)

chregu , 11.07.2004 13:32 CEST

chris

I was inspired by the "upcoming Tiger feature" spotlight to actually implement something like LiveSearch, not that XMLHttpRequest is an upcoming feature of Safari in Tiger ;) XMLHttpRequest in Safari is available since the 1.2 version, not sure if it was already in 1.1, certainly not in 1.0

I totally agree with the rest of your post

mariusm , 12.07.2004 00:30 CEST

this is a cool feature.

I remember that RemoteScripting api (ASP/Server + applet&js/client) was avaible long time ago .... supporting sync/async calls via an java applet.

Ted , 12.07.2004 16:31 CEST

I tired the searchbox this morning. On the second search using the word "xm"l the return list wouldn't clear for another search. Then the browser froze and had to be killed. This was with Mozilla 1.7 on xp.

Aftermarket Pipes , 15.07.2004 22:27 CEST (Trackback)

Insta-search
"Live" searching on a web page... not a bad idea. You enter text into a normal-looking edit control on a web page, and matching results appear in near-real time. There are different implementations of this. I'm not sure which I like better--the ...

Aftermarket Pipes , 15.07.2004 22:27 CEST (Trackback)

Insta-search
"Live" searching on a web page... not a bad idea. You enter text into a normal-looking edit control on a web page, and matching results appear in near-real time. There are different implementations of this. I'm not sure which I like better--the ...

redev.org , 20.07.2004 16:31 CEST (Trackback)

Live searching with XMLHttpRequest
Inspired by Apple’s new Spotlight search technology, a chap called chregu has created LiveSearch, a dynamic search system for his blog, BitFlux, that searches his archives and displays the results in a floating box without reloading the page. It ...

Creatively Devious , 22.07.2004 01:11 CEST (Trackback)

LiveSearch!
Ok, LiveSearch is so cool that I just had to post a plugin request to do this. Paul, an amazing and wonderful developer, sat down and made this work with ExpressionEngine in this thread. That is just about the neatest thing ever, I have to admit. I ...

urban, 14.01.2005 20:10 CEST

looks great, read the wiki but got stuck on "Using your preferred language write down a simple page for querying the database and retrieving matching records against the string contained in the above cited variable ('q')."

HELP!

opaw, 22.04.2005 11:41 CEST

very nice!

opaw, 22.04.2005 11:59 CEST

I installed livesearch in my intranet web-based application and it works! Cool!!!! It works well on firefox but not in IE and Safari. The results displayed will not disappear even if I press ESC Key or click outside the search textfield. I still don't have any idea how to fixed those problem. But the script is great! Very nice!


Nice Job folks!

Chris, 02.05.2005 20:26 CEST

I'm using livesearch and it is real cool! There is only one problem. I am using it with a form and sometimes there is an initial value in the textbox. Livesearch doesn't search the initial value, only when it has changed. How do I get it to search the initial value?

Brigham Brown, 04.05.2005 20:34 CEST

This is really good. It seems like it would be easy to make it backward compatible also.

While playing with it, I noticed that, on my browser (IE 6) at least, backspace did not update the results. Not sure if this was intended.

James Lloyd R. Atwil, 06.05.2005 11:20 CEST

This is really cool! Will try to implement this stuff on my future web site. :)

Gunnar Hafdal, 08.07.2005 04:18 CEST (Trackback)

When I was using Wordpress I used Kubrick and boy was it nice and now there is version 2, it's called K2 and I think that it's a nice name. Those who wan't to test it can go to this...

julien, 25.07.2005 11:04 CEST

Hi lads,

I would like to implement it with a database (mysql) , so the results come back from the database,

If anyone could help me ,

Thanks

Julien (julienmassillia@gmail.com)

Torkild Dyvik Olsen, 09.08.2005 13:47 CEST

I must say, this is one of the most beautiful functions i have ever seen on the web, so simpel, but still so advanced. Now i must make one my own.

this is cool, 13.12.2005 04:04 CEST

great function

hadi farnoud, 31.01.2006 17:10 CEST

amazing,i have a question! is it work with UTF-8? i wanna use it for persian lang.

chregu, 31.01.2006 17:11 CEST

This blog is using UTF-8, so it does work with UTF-8 characters :)

hadi farnoud, 31.01.2006 17:23 CEST

it's javascript problem?

hadi farnoud, 04.03.2006 20:10 CEST

can i use this blog for persian language?
persian language is a RTL language

Longneck, 13.04.2006 16:35 CEST

I made an extended Version of "Spotlight".
Check it out: http://www.scratchbook.ch/blog0520a61b290cda2c2e14c79fef927a05.html

Just click into the Searchfield on the upper right and start typing...

No new comments allowed (anymore) on this post.