In case nothing is found for a searchterm, by default, we will show a message that resembles the following screenshot:

This part can be customized by implementing the noResult property on the twn-starter-config.

Option	Type	Description
enabled	boolean	indicator to show/hide the no-results component
customHtml	HTMLElement	HTMLElement to display in the no-results component
customHtmlFn	function	function that returns the HTMLElement, like customHtml. Signature: `( e: { data: { searchterm: string } } ) => HTMLElement`
hideDefault	boolean	indicator to show the default component, if false the component will be displayed AFTER the existing component.

Examples

The customHtml option can be used to provide a static message.

const noResultsHtml = document.createElement('div');

noResultsHtml.innerHTML = '<h2>Sorry, no matches were found.</h2>' + 
  '<p>Check your spelling or use more generic search terms.</p>';

window["twn-starter-config"].noResult = {
  enabled: true,
  hideDefault: true,
  customHtml: noResultsHtml
})

Using the searchterm

If you want to use the actual searchterm, use customHtmlFn:

window["twn-starter-config"].noResult = {
  enabled: true,
  hideDefault: true,
  customHtmlFn: function(e) {
    const element = document.createElement('div');
    element.innerHTML = 
			'<h2>No matches were found for ' + e.data.searchterm + '.</h2>'+
			'<p>Check your spelling or use more generic search terms.</p>';
    return element;
  }
})