Class: WMTypeAhead

WMTypeAhead(appendTo, searchInput) → {Object|HTMLElement|function}

new WMTypeAhead(appendTo, searchInput) → {Object|HTMLElement|function}

WMTypeAhead. Displays search suggestions with thumbnail and description as user types into an input field.
Parameters:
Name Type Description
appendTo string ID of a container element that the suggestions will be appended to.
searchInput string ID of a search input whose value will be used to generate search suggestions.
Source:
Returns:
  • Returns an object with the following properties:
    Type
    Object
  • return.typeAheadEl The type-ahead DOM object.
    Type
    HTMLElement
  • return.query A function that loads the type-ahead suggestions.
    Type
    function
Example
var typeAhead = new WMTypeAhead('containerID', 'inputID');
typeAhead.query('search string', 'en');

Members

(inner) ssActiveIndex

Maintains the 'active' state on search suggestions. Makes sure the 'active' element is synchronized between mouse and keyboard usage, and cleared when new search suggestions appear.
Source:

Methods

(inner) clearTypeAhead()

Removes the type-ahead suggestions from the DOM. Reason for timeout: The typeahead is set to clear on input blur. When a user clicks on a search suggestion, they triggers the input blur and remove the typeahead before a click event is registered. The timeout makes it so a click on the search suggestion is registered before an input blur. 300ms is used to account for the click delay on mobile devices.
Source:

(inner) clearTypeAheadElements()

Removed the actual child nodes from typeAheadEl
Source:
See:
  • {typeAheadEl}

(inner) forceLinkFollow(e)

Manually redirects the page to the href of a given element. For Chrome on Android to solve T221628. When search suggestions below the fold are clicked, the blur event on the search input is triggered and the page scrolls the search input into view. However, the originating click event does not redirect the page.
Parameters:
Name Type Description
e Event
Source:

(inner) generateTemplateString(suggestions) → {string}

Generates a template string based on an array of search suggestions.
Parameters:
Name Type Description
suggestions Array An array of search suggestion results.
Source:
Returns:
A string representing the search suggestions DOM
Type
string

(inner) getLoadingIndicator() → {string}

Card displayed while loading search results
Source:
Returns:
Type
string

(inner) getNoResultsIndicator(searchString) → {string}

Card displayed if no results could be found
Parameters:
Name Type Description
searchString string The search string.
Source:
Returns:
Type
string

(inner) highlightTitle(title, searchString) → {string}

Highlights the part of the suggestion title that matches the search query. Used inside the generateTemplateString function.
Parameters:
Name Type Description
title string The title of the search suggestion.
searchString string The string to highlight.
Source:
Returns:
The title with highlighted part in an tag.
Type
string

(inner) keyboardEvents(event)

Keyboard events: up arrow, down arrow and enter. moves the 'active' suggestion up and down.
Parameters:
Name Type Description
event event
Source:

(inner) loadQueryScript(string, lang)

Inserts script element containing the Search API results into document head. The script itself calls the 'portalOpensearchCallback' callback function,
Parameters:
Name Type Description
string string query string to search.
lang string ISO code of language to search in.
Source:

(inner) toggleActiveClass(item, collection)

- Removes 'active' class from a collection of elements. - Adds 'active' class to an item if missing. - Removes 'active' class from item if present.
Parameters:
Name Type Description
item HTMLElement Item to add active class to.
collection NodeList Sibling items.
Source: