Awesome LiveSearch up!

I decided to take a break from house renovation work today and install this new LiveSearch functionality (which was adapted by Michael Heilemann of Binary Bonsai). It works very similar to how Mac OS X Tiger’s Spotlight works. Upon entering a search term, it automatically shows you results, and by continuing to type, it narrows the results further. Pretty cool.

Of course, with such coolness comes the usual caveats: this does not work in Mac IE 5, Opera or OmniWeb. I do have some visitors that use Opera, but I haven’t seen any that prefer OmniWeb or Mac IE 5. As such, I do not believe this feature loss affects that many users. A curious anomaly has popped up in final testing in Safari: the links properly change the cursor to the pointing hand when hovering above them, but clicking them does nothing. It would appear that the click is going through the absolutely positioned div containing the results. I have a z-index of 100 set on the search results, so I am not sure why clicks are passing through it as though it were not there. Any help here?

Otherwise, I am quite pleased with this wonderful use of JavaScript to create a more-usable search feature. WordPress’ built-in search is quite lacking, and I plan to overhaul that when I find the time. For now, clicking the “Show more results…” link will take the user to WordPress’ search results (all the posts in full matching any of the search terms).

Hopefully, I can get that (huge) Safari problem of non-working links functioning properly, then I think I’ll be set in this regard! I am not sure if the problem is z-index related or what. If so, the problem may have something to do with the discussion over at Surfin’ Safari about the CSS 2.1 Specifications and the Z-index property.

About this entry

You’re currently reading “Awesome LiveSearch up!,” an entry on sensory output

Published:: 4 years, 1 month ago

Category:: Sensory Output

Related entries

Recently

Kyle 9.26.04 / 2pm

Hmm…the LiveSearch works on all pages EXCEPT the index.php page. How frustrating. This leads me to believe that the problem is not CSS-based (as all pages use the same CSS). What else could it be?

Kyle 9.26.04 / 3pm

Also, I still have not tested LiveSearch in the heinous browser that is Internet Explorer for Windows. Have patience or better yet, try try something else in the mean time.

Kyle 9.26.04 / 6pm

I fixed LiveSearch to properly use the up and down arrows. Because I changed the structure of the HTML within the results, the script required some retooling to understand the new hierarchy.

Markus 10.5.04 / 5am

How did you do it? I implemented LiveSearch on my site too, and it basically works just fine. Only thing that isn’t working is the keyboard navigation, and that takes some of the useability out of the whole thing. Can you point me in the right direction? Thanks in advance.

Markus 10.5.04 / 6am

Argh, sorry for that. I meant to cite “I fixed LiveSearch to properly use the up and down arrows…”

Kyle 10.5.04 / 10am

Depending on the setup of your html output by the livesearch.php, you have to modify the JavaScript to correctly apply the #LSHighlight id to the proper container. I’m at school at the moment, and I do not have time to look at it more closely, but I’ll definitely look at it later.

Markus 10.6.04 / 11pm

I’m looking forward to hear what you found out, ‘cause my keyboard navigation still doesn’t work.

Kyle 10.9.04 / 12am

You need to alter lines 48 and 62 of your livesearch.js file to the following:

highlight = document.getElementById("LSResult").firstChild.firstChild.firstChild;

and

highlight = document.getElementById("LSResult").firstChild.firstChild.lastChild;

See if that works. Basically, the JavaScript access the DOM and modifies it. To do that, you have to tell it how and where to access the LSRow containers (which are children to LSResult and LSShadow).

Markus 10.9.04 / 11am

Thanks for your effort, but no, that didn’t solve the problem. I’ll give google a little workout and see what i can find

Kyle 10.9.04 / 3pm

Well, in any case, those are the lines where the problem is occurring. Use Firefox to look at the DOM of your site and determine the children-sibling relationship between the LSResult and LSRow containers.

Markus 10.11.04 / 4am

Call me dumbwit or whatever you like, i forgot to add the initialization of the script to the body tag. Done now and all works fine
Sorry