Server Side Autocompletion with PHP and XMLHttpRequest

Christian has an interesting new feature called “Livesearch” on his blog, described here. Try typing “PHP” in the search box on the right and see what happens.

On the client side it’s made possible with http://blog.bitflux.ch/livesearch.js – you’ll see it using XMLHttpRequest to poll another PHP script that looks like http://blog.bitflux.ch//livesearch.php?s=PHP – the script renders search results as HTML which is easily “embedded” in the output with some DOM manipulation.

This is the kind of thing I was trying to describe in Separating Browser from Resource.

Think Christians example proves that this approach can be fast and effective – if you didn’t look you’d assume the search results were sent with the page on the initial request, rather then being rendered dynamically.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.realityedge.com.au mrsmiley

    I believe I saw an experimental interface like this on php.net for function name auto complete in the search box. I’m not sure how they retrieved the data (possibly a client side listing), but this certainly does open up the possibilities.

    I’ve used similar systems (JSRS I think it was called) before to fill in form fields (selects, etc) with choices based on choices one makes in other form fields. It’s also a very useful technique for form validation as you can do it all on the server side rather than the client, but make it look like client side validation

  • Jake

    AWESOME!!! I’ve been wondering about doing something like this (PHP through JS), but I didn’t know if it was possible. And, of course, never did pursue the idea. Very nice!

  • Toby

    But in php.net’s case the results were present to the browser inside the JS (AFAIK).

  • http://www.hostetler-family.net/mike/ escape164

    One project that makes excellent use of this topic and in my opinion, is one of the best PHP projects as far as UI is concerned is Tasks by Alex King (http://www.alexking.org). The old version is free, I would recommend downloading that to check out how everything works.

    The concept is rather ingenious IMO, have a iframe that you load content from. Just brilliant. Also, notice all of the keyboard commands in the javascript, those are great as well. Overall, I think Tasks is a great working example of this topic.

    PS. I do not know Alex (though we live in the same city and I’d like to meet him), and am in no way associated with his company. I am just a PHP Programmer who is blown away at how high this guy has set the bar for an excellent web app.

  • http://blog.bitflux.ch/ chregu

    mrsmiley, the php.net search function can be found at http://ch.php.net/search.php, but it doesn’t use XMLHTTPRequest. As far as I could tell, they fetch the whole function list on the initial request in JavaScript ( http://ch.php.net/functions.js looks like a compressed version of that). This works quite well for a limited set of search entries (functions.js is 24 kB), but if one wants to search huge datasets it’s going nowhere ;)

  • http://blog.bitflux.ch/ chregu

    sorry about that post above… BBcode seems to have messed it totally up and there’s no preview and no “turn off BBcode” option … Here is it again without links (not in the mood to fight with the BBcode syntax):

    mrsmiley, the php.net search function can be found at the php search page, but it doesn’t use XMLHTTPRequest. As far as I could tell, they fetch the whole function list on the initial request in JavaScript. This works quite well for a limited set of search entries (functions.js is compressed and 24 kB), but if one wants to search huge datasets it’s going nowhere ;)

  • josheli

    i wrote a tutorial using a similar, but much more hacked remote javascript technique, here

  • josheli

    by the way, you can see a demo of my technique here.

  • tasaq

    Unfotunatelly, that function doesn’t work on Opera browser

  • http://limb-project.com pachanga

    Now this is something really impressive! I thought it was possible in IE only… How glad that i was wrong!

  • http://www.phpcomplete.com/ jasonlotito

    We are using XMLHttpRequest for our signup pages, and our admin areas. In the signup, we can do realtime searches for usernames. So after a user types in his username, onblur, we call a function that performs an XMLHttpRequest to search for that username, and report everything back in realtime.

    You can do the same thing for email addresses. If you find the same email address in the database, we will display a message asking if the user forgot his password.

    Things like that are what make a site really usable.

  • http://www.generationphp.net Xenon_54

    It’s not the first time I see this kind of script. I found, approximately 5 months ago, I guy who created a bot that can talk with you : the script was based on an iframe too to make it work.

    So for me, it’s not a new thing.

  • http://www.igeek.info asp_funda

    Looks cool enough to be put on my Blog. :D I’ll try & mess around with it as my Blog is running on WordPress & I’m not that comfortable with its code.

  • dwsdqwd

    qwdwqdwqdalert('k');

  • Anonymous