Adding autocomplete field for search in WordPress

Added a nice Autocomplete field of the search box in that blog /top right/. It’s really nice to have and I really enjoyed doing it.

I followed that article: How to: Create an Ajax-based Auto-completing Search Field for your WordPress Theme, but instead of using suggested js code, I’ve used Script.aculo.us Autocomplete way.

I really enjoyed and I hope you will like it too.

Update: I’ve wrote a plugin for this: nik.chankov.net/autocompleter/. Enjoy!

Share it:
  • Facebook
  • Twitter
  • Digg
  • StumbleUpon
  • del.icio.us
  • Google Bookmarks
  • Yahoo! Buzz
  • Add to favorites
  • Identi.ca

14 thoughts on “Adding autocomplete field for search in WordPress

  1. ok, what I’ve did:
    1. Check if you have prototype included in your html, if not include it with

    <script type='text/javascript' src='/wp-includes/js/prototype.js?ver=1.6'></script>

    2. I added following code into the header.php:

    <script src="/wp-includes/js/scriptaculous/effects.js" type="text/javascript"></script>
      <script src="/wp-includes/js/scriptaculous/dragdrop.js" type="text/javascript"></script>
      <script src="/wp-includes/js/scriptaculous/controls.js" type="text/javascript"></script>

    3. I’ve added this as well, because this is the colorization of the dropdown afterwards:

    <link type="text/css" rel="stylesheet" href="/wp-content/themes/genkitheme-10/gettags.css"  />

    4. and I’ve added this javascript after the form:

    <script type="text/javascript">
    //<![CDATA[
    var contact_name_auto_completer = new Ajax.Autocompleter('s', 'tag_update', '/wp-content/themes/genkitheme-10/gettags.php', {})
    //]]>
    </script>

    Which doing the actual job.

    5. I also changed the second and the third line of the php file, because with scriptaculous the post param was $_POST[‘s’].

    so instead of:

    if (isset($_POST['search'])) {
            $search = htmlentities($_POST['search']);

    I have:

    if (isset($_POST['s'])) {
            $search = htmlentities($_POST['s']);

    6. if you copy and paste the form from the example above, remove onkeyup=”request(this.value);” callback, because with scriptaculous it’s not needed.

    Hope this is much clearer now.

  2. Thank you very much, one last question nik, there is a bug in the php file that the other guy’s. for example if i write something in the input and delete it, it displays all the tags in the database. but in your site this bug is not exist. how you managed to do it?

  3. I think this is because I am using Scriptaculous rather than suggested in the original post. Anyway, this is the content of my php file:

    <?php
    if (isset($_POST['s'])) {
            $search = htmlentities($_POST['s']);
    } else  $search ='';
    $db = mysql_connect('localhost','user','password'); //Don't forget to change
    mysql_select_db('database', $db);            //theses parameters
    $sql = "SELECT name from wp_terms WHERE name LIKE '$search%'";
    $req = mysql_query($sql) or die();
    echo '<ul>';
    while ($data = mysql_fetch_array($req)){
            echo '<li><a href="#">'.htmlentities($data['name']).'</a></li>';
    }
    echo '</ul>';
    mysql_close();
    ?>

    Hope this helps

Leave a Reply

Your email address will not be published. Required fields are marked *