Advanced UI Options

<script type="text/javascript">
  $.getScript("//cnstrc.com/js/cust/<your_custom_bundle_name>.js", function () {
    $("#query").KrestorAutocomplete({
      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 .KrestorAutocomplete() 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'