Predictive Search is a way to provide suggestions 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 How do I edit content? Knowledge Base article for information on how to edit templates
The script portions above (script includes at the top and the script block at the bottom) would normally not be near the html content but somewhere in a header template; the bottom script block usually being in a footer template or at the bottom of the layout template.
<!-- 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>
