NAV

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_api_key>.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_api_key>.js', function() {
    $('#query').constructorAutocomplete({ 
      key: '<your_api_key>', 
      maxResults: 4, 
      imageWidth: '200px'
    });
  });
</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.
maxResults 10 Specify the maximum number of suggestions returned.
sectionOrder order created Set the order in which autocomplete sections appear in suggestion list. Array of autocomplete section names.