Adding autocomplete field for search in WordPress

14 Replies

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!

14 thoughts on “Adding autocomplete field for search in WordPress”

  6. Nik Chankov Post author

    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.

  8. Borans

    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?

  9. Nik Chankov Post author

    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 *