Thank you for your feedback.
Form temporarily unavailable. Please try again or contact to submit your comments.
  • Madrid
  • London
  • Kingston
  • Jakarta
  • Istanbul
  • Helsinki
  • Geneva
  • Store

Create an advanced typeahead template

Log in to subscribe to topics and get notified when content changes.

Create an advanced typeahead template

Configure the way typeahead results display with an advanced template.

  1. Complete the required fields in Define a search source.
  2. In the Typeahead tab of the Search Source record, select the Advanced typeahead config check box.
  3. In the Typeahead template field, add an HTML template.

    This example uses AngularJS bindings to display service catalog images in the typeahead results.

    <i class="ta-img" ng-if="match.model.type=='sc'" style="background-image:url('{{match.model.picture}}')"></i> 
    <i class="ta-img" ng-if="match.model.type=='sc_guide'" style="background-image:url('{{match.model.picture}}')"></i> 
    <i class="ta-icon fa fa-file-text-o" ng-if="match.model.type=='sc_content' && match.model.content_type == 'kb'"></i> 
    <strong ng-if="match.model.type=='sc_content' && match.model.content_type == 'external'">➚</strong> 
    <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
  4. Click Update.

    Typeahead results display beside the image defined in the service catalog record.