Suggest Completions in Search Forms

Use the Suggestions widget to define a completion service to use within a SearchForm.

Usage

In this case the suggestions will come from two centrally defined services and use the default layout:

<widget:searchForm query="${query}" cssId="main-form" placeholder="Search">
    <jsp:attribute name="suggestions">
        <widget:suggestions completionService="services.suggestions.static,services.suggestions.index" />
    </jsp:attribute>
</widget:searchForm>

You can also customise the layout of the suggestions (see Tempo for template language):

<widget:searchForm query="${query}" cssId="first-form" placeholder="Search">
    <jsp:attribute name="suggestions">
        <widget:suggestions completionService="services.suggestions.static,services.suggestions.index">
            <dl data-template>
                <dd data-template-for="values"><a href="#" rel="${pageContext.request.contextPath}/{{parameters}}">{{highlighting}}</a> ({{label}})</dd>
            </dl>
        </widget:suggestions>
    </jsp:attribute>
</widget:searchForm>