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>
cw-index-1-r2
goUSF-index-1
usfgm-index-1-r3
bgl-index-1
ucon-index-1-r1
adopt-index-2
skalet-index-1-r2
pcabral
th-index-1
rms-index-2
km-index-1-r1
peu-index-2-r3b
pdu-index-1-r2a
oph-index-1-r2
mmm-index-1
long-index-1-r1a
ernies-index-1
cooks-index-1-r2a
df-index-1-r1
vs-index-1
uni-index-1
pe-wedding-print
Screen shot 2013-10-25 at 3.38.39 PM
fred
cabral
dava
psa
errg
apex
pag
cwb
beginners
awakealive
ecom
ab