LiveSearch

Skip to end of metadata
Go to start of metadata

History

Inspired by Apples upcoming Spotlight feature (and others, Apple just inspired me to finally do it...), I implemented a LiveSearch function into our blog. Go to http://blog.bitflux.ch/ and type something into the right search box. It should immediately show the searches found.

How it works

On the client side, we use XMLHttpRequest for sending the request to the server. There we have a little PHP script, which returns a small HTML file (http://blog.bitflux.ch/livesearch.php?s=PHP ) . This is then inserted into the page with some DOM manipulation.

The drop shadow is done with some CSS magic (see http://wubbleyew.com/tests/dropshadows.htm ).

Supported Browsers

  • MSIE >= 5.0 (only tested with 6.0, should work w/ 5.x, OK with 5.0 on Win98)
  • Mozilla/Firefox (Since at least Mozilla 1.0)
  • Safari >= 1.2 (according to [ Apple's Documentation|http://developer.apple.com/internet/webcontent/xmlhttpreq.html]).

Not supported

  • Konqueror
    • not true: using Konq 3.3.2, I get this
      (JensBenecke, 2005-02-24)
  • Opera (probably not true any more, Google suggest works with the latest version Opera.)
  • Internet Explorer 5.2.3 (Mac) fails with an error (disabling patch needed)

Source Code

The code is licensed under the Apache Software License 2.0 and can currently be found under http://svn.liip.ch/repos/public/fluxcms/branches/1_5/webinc/js/livesearch.js.

Installation

Grab yourself a copy of the js script. Open it and search for 'livesearch.php?q'. Change the filename and variable according to the ones you plan to use.

Now on the html page in which you wish to provide the feature you'll have to: link the script in the <head> section; add an onload="liveSearchInit()" to the body tag; create a form named "searchform" having a handler _ onsubmit="return liveSearchSubmit()". Add an input field with _id="livesearch", name="q" and onkeypress="liveSearchStart()". Then in the point where the result are to be displayed insert these two divs as placeholders:

<div id="LSResult" style="display: none;"><div id="LSShadow"></div></div>

At this point all that is missing is the script on the server which will respond to search requests. 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'). Resulting output has to be a text/xml file (check http://blog.bitflux.ch/livesearch.php?q=PHP as a reference) in the form of a parent <div class="LSRes"></div>, containing one more <div class="LSRow"></div> for each record: inside the latter put whatever code had to be displayed (typically a link).

Contributions

Since the code is open source, we're glad to accept your improvements you made to the code. Send patches to chregu@bitflux.ch

Iframes

The same would be possible with iframes, but XMLHttpRequest gives you more control about the actual request.
Only GET Requests are possible with iframes, XMLHttpRequest allows you also to use POST or PUT or other HTTP request methods.

Actually, I believe you can post a form into an iframe. It takes a little more work, but it is still doable. You could even dynamically attach the iframe, build the form, point it at the iframe (of course, this would be "verboten" in Strict - no target), and submit it.

Demos

Links

Questions

If you have questions, please use the [Discussion] link above and add your question or comments

Future Ideas

  • Sliding/Paging possibilities for retrieving more results
  • "More info" button on each result (additional request to the server, when clicked)
  • iframes mode for "older" browsers
  • Results should disappear again, if you haven't found anything and click somewhere on the page. From August Trometer:
  • Being able to use the keyboard to select an entry from the result list is fine for me, but I couldn't wait until one of the users tried to click on a result entry. So... I added two functions that are called from the result item (via onmouseover resp. onclick with this as argument)

Labels:

Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.

Comments (7)

 

  1. Dec 21, 2007

    Anonymous says:

    Konqueror browser (KHTML rendering in fact) works at least since 3.5.8 version)

    Konqueror browser (KHTML rendering in fact) works at least since 3.5.8 version)

  2. Mar 09, 2008

    Anonymous says:

    Hi there, Please feel free to delete this comment if deemed necessary but I was...

    Hi there,

    Please feel free to delete this comment if deemed necessary but I was just wondering how do you get the Live Search to work so that when the results come up you can use the up / down and enter keys to select an item? At the moment I can get it to spit out the results but I have to click on them by hand. Would love to be able to use the arrow keys to select instead.

    Any help with this would be massively appreciated.

    Best wishes,

    Mark

  3. Sep 24, 2008

    Anonymous says:

    I need some help. I have Problems with this step: "At this point all that is m...

    I need some help.

    I have Problems with this step:

    "At this point all that is missing is the script on the server which will respond to search requests. 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'). Resulting output has to be a text/xml file (check http://blog.bitflux.ch/livesearch.php?q=PHP as a reference) in the form of a parent <div class="LSRes"></div>, containing one more <div class="LSRow"></div> for each record: inside the latter put whatever code had to be displayed (typically a link)."

    How does it works? Does anybody have a little example for me?

    I wanna use livesearch not as a normal search. I have a very long Dropdown and I want to replace it with a livesearch input field.
    Only the values from the former dropdown should be a result of the livesearch input field. Is this possible? If yes, how?

    Thanks.

    Stefan

  4. Oct 08, 2008

    Anonymous says:

    Is there a way to make backspace work? Looks like pressing backspace does not up...

    Is there a way to make backspace work? Looks like pressing backspace does not update the results.

    1. Oct 08, 2008

      Anonymous says:

      Looks like backspace works in Firefox, but not Safari. Is it a Safari/WebKit bug...

      Looks like backspace works in Firefox, but not Safari. Is it a Safari/WebKit bug?

  5. Oct 15, 2008

    Anonymous says:

    I found that this does not work in IE7 quite as it should. only the initial subm...

    I found that this does not work in IE7 quite as it should. only the initial submission works. - the reason is that while IE7 does support window.XMLHttpRequest it is only IE6 dressed up, so like IE6 it needs a new request each time. Fortunately it still supports ActiveXObject so you can use this to test for IE7

    Therefore, in the function 'liveSearchDoSearch()' I changed the empty
    if (window.XMLHttpRequest) {
    }

    to

    if (window.XMLHttpRequest && window.ActiveXObject)

    Unknown macro: { // need a new one each time for IE7 because it's just IE6 in a frock liveSearchReq = new XMLHttpRequest(); }

    else if (window.ActiveXObject)

    Unknown macro: { // and for IE6 because it's IE6 not in a frock liveSearchReq = new ActiveXObject("Microsoft.XMLHTTP"); }

    This will get it working in IE7.
    cheers,
    Niall.

  6. Dec 30, 2009

    Anonymous says:

    What is document.getElementById("LSHighlight"); ???? LS HighLight is not a XMl-...

    What is document.getElementById("LSHighlight"); ????

    LS HighLight is not a XMl-tag in this example?