Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Predictive Search is a way to provide suggestions as a user enters search terms into a search text box.

Multimedia
width392
namepredictive-search.mp4
width392
height316

Step-by-step guide

...

Code Block
languagexml
<!-- 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
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
showSpacefalse
reversetrue
typepage
cqllabel in ("product","search") and type = "page" and space = "KB"
labelssearch product