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.

Wow.

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

isch huregeil…

hammer!

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

Brilliant!

Asynch requests are a killer technique.

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!!!

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

did i mention it’s uebergeil? nice work.

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.

Cool!

This is completely awesome.

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 !

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

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.

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

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 ;)

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

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

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 ;]

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 ;)

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

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

i entered “XMLH” and nothing was found… why? the search should find THIS post…

tamole

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

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?

Impressive! -I like.

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.

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.

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)

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

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.

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.

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!

very nice!

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!

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?

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.

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

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)

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.

great function

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

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

it’s javascript problem?

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

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…