Spotlight-like livesearch added
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
Christian Stocker Find more about him on Twitter, Facebook, Google+, LinkedIn, Xing and his personal site.
Comments [54]
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
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.
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 !
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 !
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 ;)
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?
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.
chris holland (http://chrisholland.blogspot.com/) , 11.07.2004 07:26 CEST
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 ...
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!
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...
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.
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...
Ned Baldessin , 05.07.2004 19:26 CEST