Search Autocomplete

You can autocomplete the quick product search with the jQuery UI Autocomplete widget.

Include the jQuery UI CSS in your head:

<link rel="stylesheet" href="/javascripts/jquery-ui/css/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css">

Load jQuery (if you haven’t already) and the jQuery UI at the end of the body:

<script src="/javascripts/jquery-ui/js/jquery-1.7.1.min.js"></script>
<script src="/javascripts/jquery-ui/js/jquery-ui-1.8.18.custom.min.js"></script>

Then bind to the search and setup the autocomplete:

<script language="javascript" type="text/javascript">
//<![CDATA[
  jQuery(function($){
    $("#search_query_box").autocomplete({
      source: "/search/autocomplete",
      minLength: 2,
      select: function(e, ui) {
        $(e.target).val(ui.item.value);
        $(e.target).parents('form').submit();
      }
    });
  });
//]]>
</script>