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:

OptionDefaultDescription
imageWidthnoneSpecify the width of images displayed in the suggestion list.
imageHeightnoneSpecify the height of images displayed in the suggestion list.
maxResultsPerSectionnoneSpecify 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.
sectionOrderorder createdSet 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'.
htmlStructurestandardSpecify the way the suggestions are displayed. Potential values: 'standard', 'product-centric'