NAV Navbar

Autosuggest Client

The Constructor.io Autosuggest (a.k.a. Autocomplete) javascript client adds autocomplete to your site with two lines of code.

After you upload a dataset via our website or API, Constructor.io will start providing your users lightning-fast suggestions!

Install Using jQuery

<script type="text/javascript">
  $.getScript('//cnstrc.com/js/cust/<your_custom_bundle_name>.js', function() {
    $('#query').constructorAutocomplete({
      key: '<your_api_key>'
    });
  });
</script>

To install with jQuery, use this code snippet. In this example, #query is the DOM id of your search box, and <your_api_key> can be found on your dashboard.

Style Your Autocomplete

<div class="autocomplete-suggestions">
  <div class="autocomplete-suggestion autocomplete-selected">...</div>
  <div class="autocomplete-suggestion">...</div>
  <div class="autocomplete-suggestion">...</div>
</div>
.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
}
.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}
.autocomplete-selected {
    background: #F0F0F0;
}
.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}

You may style autocomplete suggestions in any way you'd like. Suggestions are returned with the following HTML markup

Advanced UI Options

<script type="text/javascript">
  $.getScript('//cnstrc.com/js/cust/<your_custom_bundle_name>.js', function() {
    $('#query').constructorAutocomplete({
      key: '<your_api_key>',
      imageWidth: '200px',
      imageHeight: '200px',
      maxResultsPerSection: {
        'Search Suggestions': 8,
        'Products': 6
      },
      sectionOrder: ['Search Suggestions', 'Products'],
      htmlStructure: 'product-centric'
    });
  });
</script>

We provide a number of options for advanced users. You can enable these options by adding the parameters to the hash that's passed into the .constructorAutocomplete() method, as below:

Option Default Description
imageWidth none Specify the width of images displayed in the suggestion list.
imageHeight none Specify the height of images displayed in the suggestion list.
maxResultsPerSection none Specify the maximum number of suggestions per section. Value must be an object where each key is an autocomplete section name and each value is the number of results.
sectionOrder order created Set the order in which autocomplete sections appear in suggestion list. Value must be an array of autocomplete section names such as 'Products' or 'Search Suggestions'.
htmlStructure standard Specify the way the suggestions are displayed. Potential values: 'standard', 'product-centric'