Predictive Search provides suggestions in a dropdown as a user enters search terms into a search text box.
Setup of Predictive Search involves several areas of the system:
Commerce Vision staff can assist in population of Predictive Search Data. Please contact us for Assistance
To configure the maximum number of result you want the user to see suggested, underneath the search box, as they type, you need to:
A search widget needs to be setup most probably in your Layout Template:
Please see the Editing with the Content Editor (2014 R1) Knowledge Base article for information on how to edit templates |
The top and bottom script portions below would normally not be near the html content but somewhere header and footer of your layout template (or in other templates such that these blocks are placed at the top and bottom, respectively, of the rendered page.) |
<!-- 3rd Party Style Dependencies --> <link type="text/css" rel="stylesheet" href="/Scripts/kendo/2013.2.716/styles/kendo.common.min.css"></link> <link type="text/css" rel="stylesheet" href="/Scripts/kendo/2013.2.716/styles/kendo.default.min.css"></link> <!-- 3rd Party Script Dependencies --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="/Scripts/underscore-1.4.2.js"></script> <!-- Script Dependencies --> <script src="/Scripts/kendo/2013.2.716/kendo.web.min.js"></script> <script src="/Scripts/cv.widget.kendo.js"></script> <script src="/Scripts/cv.ajax.js"></script> <script src="/Scripts/cv.util.js"></script> <script src="/Scripts/cv.css.js"></script> <script src="/Scripts/cv.data.kendo.js"></script> <script src="/Scripts/cv.css.product.js"></script> <script src="/Scripts/widgets/cv.css.ui.productSearch.js"></script> <!-- Container to Initialize Widgets Within --> <div id='predictiveSearch'> <!-- Widget Definition and View --> <fieldset data-role="productsearch" data-search-page-url="/ProductDisplay.aspx" data-use-suggestions="true" data-search-query-string-key="ProductSearch"> <span data-view="true"> <span tabindex="-1" role="presentation"> <input type="text" autocomplete="off" data-text-field="SearchKey" placeholder="Search for products" data-role="autocomplete" data-bind="source: suggestionsDataSource, value: searchText, events: {keyup: searchInputKeyUp}" data-value-update="keyup"> </span> <input type="button" data-bind="click: search" class="k-button" role="button" value="Search"> </span> </fieldset> </div> <!-- Trigger Widget Initialization --> <!-- WARNING: This ought to be done as late in the page as possible and will initialize all kendo widgets --> <script> kendo.init("body"); </script> |
Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.