Predictive Search is a way to provide suggestions as a user enters search terms into a search text box.
Multimedia |
---|
width | 392 |
---|
name | predictive-search.mp4 |
---|
width | 392 |
---|
height | 316 |
---|
|
Step-by-step guide
...
Code Block |
---|
|
<!-- 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
Content by Label |
---|
showLabels | false |
---|
max | 5 |
---|
spaces | KB |
---|
showSpace | false |
---|
sort | modified |
---|
showSpace | false |
---|
reverse | true |
---|
type | page |
---|
cql | label in ("product","search") and type = "page" and space = "KB" |
---|
labels | search product |
---|
|