Predictive Search provides suggestions in a dropdown as a user enters search terms into a search text box.
Step-by-step guide
Setup of Predictive Search involves several areas of the system:
- Database: changes to one of the tables in the database to include Predictive Search terms
- Settings
- Maximum Predictive Search Result to Display
- Web: Setting up your Layout Template to include a search box and relevant script files
Database Changes:
Commerce Vision staff can assist in population of Predictive Search Data. Please contact us for Assistance
Setting Configuration
Maxinum Predictive Search Results to Display
To configure the maximum number of result you want the user to see suggested, underneath the search box, as they type, you need to:
- Go to The Role Administration Page (zRoles.aspx)
- Choose the Role you want to configure Predictive Search for
- Click the Functions tab
- Click Modify tab
- Set the Maximum Predictive Search Results to Display setting to the maximum number of results you want the user to see underneath the search box as they type
- Click OK button
Web Set-up
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 help
