Using ancient formulas, the scales of a dragon, spit of a toad and a single hair from the head of Margaret Thatcher – yeah, not really – I have succeeded in concocting a search-as-you-type. For all you Mac-whores out there, it’s sort of like Quicksilver / Spotlight ‘lite’.
Try it out. Type for instance ‘kubrick’ into the search form, and wait a second. There, a list should roll down and show you the last 20 entries with the word Kubrick in them. Now use arrow up and down to navigate and enter to select an entry.
Ehm… Now press the back button… Hello?… Come back!
So anyway. How cool is that? Pretty damn cool I’d say! It’s still sort of a proof of concept, but I’ve got a few ideas on how to implement it in other ways as well.
Now, it is worth noting that it doesn’t work on all browser (Opera and OmniWeb, I’m looking at you two!), but it should work on IE, Mozilla and Safari variants, so that covers 99.9% of the market. And for you guys on Opera and Omniweb, don’t fret, you (and everyone else) can still use the search form in the old fashioned way. Just press enter and it’ll take you to the normal search page.
How do you get this on your own WordPress 1.2 site? Easy peasy.
Download livesearch.php. Now open wp-blog-header.php and go to line 527, where it says ‘if ($s && empty($paged)) { // If they were doing a search and got one result‘. Uncomment that section of code (or download my copy). This is to prevent WordPress from automatically forwarding the user to a permalink, if it is the only result returned on a search.
Update: Now make a few changes to livesearch.js.
Once you’ve done that, just follow the instructions, and you should be fine. Feel free to ask questions in this entry. However since this isn’t my code (I just supply the missing link between WordPress and Livesearch, I suggest that you don’t start doing this unless you have a little understanding of PHP and such.
I’ll see if I can’t put together a small Livesearch for WordPress 1.2 package at some point soon.
PS: No, it doesn’t have Reversi…
Update: After having spent way too long time plugging in a new search algorithm, it turned out to be broken in various annoying ways. Annoying, seeing as how the standard search is pretty tame all in all. If you know of a good WordPress search hack, let me know.
Now I’m off to a company party.
Update: I think it’s worth noting, since there seems to be some confusion on this matter (though I can’t quite understand how, since all the livesearch code is found on a site that is distinctly not mine), that I wrote the livesearch javascript code. Which I of course didn’t. These guys did. As it says on the Wiki.
What I should have mentioned, when I implemented it, was that some of the code and the alternating color selection currently powering my livesearch, is in fact Garrett Murray’s work. My apologies to Garrett for not pointing this out earlier. A testament to how I should make sure to get the credits right before I forget about it! (And to think this is the second time I do this in one and a half year… I’m still sorry Alex).
Related
How to make Livesearch validate
Congratulations! This looks awesome!
It really is pretty damn cool. The only thing you have to implement now is the search word highlighting, that you get by using the old fashioned way.
Alex: That’s a good point. I’ll keep that in mind.
That’s pretty cool. I’m so getting used to the live search things on my mac that this feels really good! In fact, I’ll bet we’re gonna see this more and more on the web.
Very cool. Especially when I did it inside of FeedDemon.
I think Gmail will start to push things like this into more common use with its javascript-only interface. Or at least I hope so.
Pretty damn sweet. Perhaps a link to “advanced search”, being the old search?
Perhaps. Though all you have to do is not select a result on the dropdown, and press enter. That’ll do an old-school search :)
Oh, doh… hehe. Nevermind me. That’s the behavior it should have, (i.e. how Firefox / IE address bar navigates history of visited websites).
First, it didn’t do anything for me, then, after a hard reload, I got the dropdown, but it remains empty.
This is on FF 1.0PR, but I can’t imagine you haven’t tested on this browser. Anyway, here’s the JS Console message:
Error: highlight.setAttribute is not a function
Source File: http://binarybonsai.com/livesearch.js
Line: 54
Strange.
Probably because I’m playing around with the code.
Really cool!!
I second the statement about search text highlighting in found entries, it drives me crazy that wordpress can’t do that properly (ie permalink pages/second search/etc..)
Hehe, I can see you’re playing around with it…
This is quite interesting…I’ll be checking to see where this goes.
yes, i cant make head nor tail of how to install it so a little Wordpress package when youre happy with it would be lovely.
Very nice tool :)
I’ve installed it in my blog, I even copied your CSS-Blog for livesearch. I hope you don’t mind, but it perfectly fits into my (kubrick-based) layout :)
Thank you for this post.
You just keep getting bigger – you are on the top of the web a-list. I’m sitting comfortably at #6 right behind Todd Dominey and Kottke.
SW33T :D
Donnie: Haha, hat’s a sweet – though slightly naive – thought :)
Jens: Does it r0xx0rz your b0xx0rz?
That’s magic isn’t it?
The Search form disappeared, are you playing around with the layout?
Share your thoughts and Ideas with us.
Is it missing?!… It shouldn’t be :)
I thought it was missing too because it isn’t in the place it used to be, but after searching for some time I found it’s new location: top right side of the main container.
Nice work Michael, I will be using this in the future, it’s pretty nifty.
Ah… Yes, I should perhaps indicate it better.
Hm, I can’t make LiveSearch work… I replaced the code in kubrick-searchform.php with your code from this site, added the CSS to wp-layout.css and inserted the onload=”“ to the body tag of my site and loaded the livesearch.js in the header. As the action in the form, I use livesearch.php from this site.
When I press enter in the searchform, I get a list of matching postings, but they don’t display while typing. I use Firefox 0.9.3 and WP 1.2 for this. Can you please point me to the missing code?
Dude! It more than r0xx0rz my b0xx0rz. It makes me realize I need to hire someone like you because not only can I not implement shit like this, I couldn’t even think of it. And if I had thought of it, I wouldn’t have believed it was implementable.
So… hat’s off.
Jens, let’s just be clear on the fact that I didn’t code livesearch as such. I merely adapted it to my use.
Carsten, you need to find the entry for livesearch.php in livesearch.js and change it to kubrick-searchform.php… Just as it says on the wiki :)
Sorry Carsten, I must’ve been drunk. That’s not what you should do. In fact, that won’t work at all.
Though, do make surethat livesearch.php, which you downloaded from here, is present…
Hehe, no problem. I try to figure it out by myself. I did everything that I was told, but it’s not working yet.
I inserted the code in kubrick-searchform.php so I don’t have to copy’n‘paste it in the whole index.php. It’s displayed and there’s a small delay while typing, but the results are not displaying. When I press Enter, livesearch.php?s=FOO is called and it displays the matching entrys. Maybe there is an error in the CSS. I copied it from your pages…
i found that i had to change some of the q to s
this
liveSearchReq.onreadystatechange= liveSearchProcessReqChange;
liveSearchReq.open("GET", "/livesearch.php?q=" + document.forms.searchform.q.value);
liveSearchLast = document.forms.searchform.q.value;
liveSearchReq.send(null);
became this
liveSearchReq.onreadystatechange= liveSearchProcessReqChange;
liveSearchReq.open("GET", "/livesearch.php?s=" + document.forms.searchform.s.value);
liveSearchLast = document.forms.searchform.s.value;
liveSearchReq.send(null);
note those 3 ‘s’, one after php? and each in searchform.s.value once i changed them to s from q it worked fine.
thats near the bottom of the livesearch.js file.
Ah, yes! Of course. I had forgotten about that. Very important :)
lol Alright, guys! Thank you for your help. Now there is a display. Unfortunatly, the file is not found yet. ;) But that’s a minor problem. Thank you for your late help.
ah cheers michael, i hadnt noticed the single post thing. looks quite amusing though.
Ive accidentally (sort of) upgraded myself to some version of wordpress1.3pre-alpha so i find not all instructions work quite the same.
Hehe, yeah I make no guarantees about 1.3a :)
Ok, it work’s now! I’m not using the top-level directory on my domain, so I have to edit the livesearch.js and search for ‘liveSearchReq.open(“GET”, “/livesearch.php’ and remove the trailing slash. Now it’s working. Thank you all, especially you, Michael. :-) That’s a nice feature for formulars.
I dont know if i have some odd set up, but Safari’s cache seems very strange. It doesnt always update properly, alt-refresh doesnt always seem to reload images properly, and for some even more odd reason refreshing Firebirds cache seems to force Safari to update on the next reload. very strange, anyway i feel better for that ;-)
On http://www.litux.org/wiki/css/livesearch.js, I’ve added a function “liveSearchDisplayResult(notice)” to be called just before the request is started.
Hey Michael I have packaged this into a plugin, if you haven’t already gotten around to it yourself.
If you would like to go ahead and package it that is fine with me, but if you would like to just go with mine let me know and I will make it available.
Chris, no no, by all means, please go ahead :) — Leave a link.
I just wanted to mention something — since you’ve already had to point it out once to Jens, it would be a good idea to make it clear that you didn’t write the LiveSearch script.
Also, I feel a little slighted since you clearly based your results design on mine (“arrows & enter”, “close (esc)” being in top bar, your highlight colours are nearly identical, etc) but didn’t mention it in your post. I’m not saying I’m the first person to use LiveSearch, but I definitely created a unique result look that many have remarked on and while I’m delighted you found it good enough to tweak to your own usage, it’s always nice to be credited.
Garret, I am very sorry.
I thought your implementation was pretty cool, and threw it into my code just before I hit the sack one day. It most certainly wasn’t my intention to slight you, especially considering how xpad is one of my favorite OS X apps and how you have helped me with it in the past ;).
As I also wrote in the entry, I generally consider the whole implementation as it is right now, a proof of concept more than anything else. I’ve wanted to change it since I put it in there, but I am unfortunately too busy at work just now.
I’ve added a note to the entry on this matter, and hope that we still see eye to eye.
I just read my comment and I sound like such a jerk. That, of course, was not my intention. I should never write comments late at night, especially not when I have the flu.
No worries, Michael. Thanks for the credit, though — I do appreciate it. More than anything, I’m glad you liked what I did with it and I’m glad to see LiveSearch getting around to more weblogs.
I like what you’ve done here with the “more results” link. It’s smart. As of right now, my search is very limiting because I don’t offer this extended page. I think I might add that functionality in my new codebase.
I can’t get it to work, I added the script to the header, added to the body tag, added the CSS. Changed the php include to livesearch-searchform.php
The code for the search box is this:
<form onsubmit="return liveSearchSubmit()" id="searchform"name="searchform" method="get" action="search" autocomplete="off">
<input type="text" id="livesearch" name="s" value=""
onkeypress="liveSearchStart()"
onblur="setTimeout('closeResults()',2000);" class="inputboxes" />
<div id="LSResult" style="display: none;"><div id="LSShadow"></div></div>
</input></form>
I finally made it work. Hat’s off to Michael and whoever else ought to be credited.
I have an odd problem though, that i can’t find the solution to: I can’t use the arrow keys or the escape button to navigate/close the results. Any help or pointing in the right direction to where to find the solution are appreciated.
Try making sure that the results file is all on a single line… Don’t know if that’s the problem, but it solved some things for me.
Which file is the results file?
livesearch.php, the one you can download in this entry.
It’s one line.
The code is on one single line and has been the whole time, so that’s not the problem.
But thanks for trying. I hope someone else has another suggestion, maybe having had the same problem?
Did you copy the JS from my server or from the wiki?
I have tried both now, still the same problem. Everything with Livesearch works fine, but not the keyboard navigation.
Totally OT: Your mailsubscription to comments seems to be not working?
Then I’m not sure. And yeah, the subscription is broken :( — I don’t know why.
I copied the JS from your server.
My JS is the same as Garrett’s JS, which requires a different results file…
I have livesearch.php and I think all the required CSS.
Carl, I’m not sure if this will help or not but it sorted a few things out for me. There is actually quite a lot to be changed in the livesearch.js file. I went to Carsten Ringe’s site and lifted his file from this URL:
http://www.aikidoforum.de/kopis/livesearch.js
You will then have to change the line:
liveSearchReq.open(“GET”, “/kopis/livesearch.php?s=” + document.forms.searchform.s.value);
I would recommend sticking in your absolute URL so you get:
liveSearchReq.open(“GET”, “http://carlbanks.triplehelix.info/livesearch.php?s=” + document.forms.searchform.s.value);
After that, I noticed a couple of things about your form. I’m not sure you should have a tag there.
Also, you should have this as your action:
action=“http://carlbanks.triplehelix.info/index.php”
There’s nothing to be changed in livesearch.php, so just leave it alone.
I didn’t bother using kubrick-searchform.php. I just used the same code in my index page as Michael has in his but with the change of URL, obviously.
In the head section of my index.php I also used an absolute URL instead of a relative one. So you would have:
If it still doesn’t work, then sorry. Good luck!
Oops, sorry, I forgot about the rules for entering code in the commnets. It’s the “
“ tag that I’m not sure should be there and the code in the head of your index page should be ““.
Hope that works this time.
Nope, that still doesn’t print. Ok, it’s the “/input” tag and the head code is “script type=“text/javascript” src=“http://carlbanks.triplehelix.info/livesearch.js”>
This time? Excuse the missing brackets. Jings!
I added the script, what do I add differently to the search form?
Just this:
action=“http://carlbanks.triplehelix.info/index.php” , instead of action=“search”
but take out the “/input” tag you have near the end, before the “/form” tag. I don’t think it’s needed.
The form on my site is kubrick’s default form, the livesearch form code is:
Unfortunately Carl, I’m off to Crete in two hours time! But, before I go, I can tell you that I didn’t use the kubrick default form. Insert this instead of what you have:
<form style="margin: 10px 0; padding: 0;" onsubmit="return liveSearchSubmit()" id="searchform" name="searchform" method="get" action="http://carlbanks.triplehelix.info/" autocomplete="off">good luck.<input type="text" id="livesearch" name="s" value="search dadoo" onkeypress="liveSearchStart()" onblur="setTimeout('closeResults()',2000); if (this.value '') {this.value = 'search dadoo';}" onfocus="if (this.value 'search dadoo') {this.value = '';}" class="inputboxes" />
<div id="LSResult" style="display: none;"><div id="LSShadow"></div></div>
</input></form>
Nah, that didn’t print properly either. But if you ignore the kubrick-searchform.php completely and just use the form code on Michael’s site, but insert your own URL instead, that should work. This would have been easier using e-mail!
You can use the CODE tag.
I am closing this entry’s support questions, please take your questions to the Binary Bonsai flickr group from now on.
I don’t know if anyone else has mentioned it, but in Safari, adding something like autosave=‘com.binarybonsai.search’ to the input type=“search” element you’re using will automatically save the user’s searches. Another cool feature of the input search element :)