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.