Create Search with Auto-Fill

Often, we want to help our users out with their searches by starting to auto-fill their searches when they begin to type into our search bars. As with most things, WordPress makes this a fairly easy task to accomplish. In this case, we’ll allow our users to search our site with hints to the tags we use across the site. You can easily modify this code to feature categories as well.

This assumes that your search input has the id of “s.”

To accomplish this, we’ll place this in our head tag.

<script src="<?php echo bloginfo('template_url');?>/js/jquery-ui.js"></script>

   <?php
      $posttags = get_tags();
      if ($posttags) {
        foreach($posttags as $tag) {
          $tags .= '"' . $tag->name . '", '; 
        }
      }
    ?>

<script>
  jQuery(function() {
    var availableTags = [
      <?php echo $tags;?>
      ""
    ];
    jQuery( "#s" ).autocomplete({
      source: availableTags
    });
  });
</script>