Input Search widget

The input search widget provides 2 different view types, allowing a user to search for a show or event and/or search for an appropriate performance.

Embedding the Widget

  1. Ensure you've got a valid affiliate id.
  2. Create a new html page and add the following markup:
<!doctype html>
<html lang="en">
  <head>
    <title>Input search widget example</title>
  </head>
  <body>
    <div
        data-app="search-app"
        class="search-widget"
        data-view-name="input-search"
        data-affiliate-id="masterdataelastic"        
        data-index-name="products"
        data-css-mode="full"
    ></div>
     <!-- js -->
    <script type="text/javascript" src="https://search-service.tixuk.io/vLatest/js/search-app.js"></script>
  </body>
</html>

Supported data attributes

In addition to the standard search data attributes, the following data attributes are used to customise the behaviour or 'look and feel' of the Input Search widget.

NameMandatoryTypeDescription
data-view-nameyesstringTitle of special widget's view user wants to insert. Represent widget type.

There are several views:

input-search
search-results
search-results-with-filters
search-cta

In case of this widget "Input-search" should be used. Example:
data-view-name="input-search
data-quick-search-modeNoBooleanAdds "search" button to the form when "data-quick-search-mode" is true. Search executes when search button is clicked.

Note: By default, search executes automatically when user typing in the form.
data-use-urlNoBooleanAdds url navigation when user execute search event. User can save url in the bookmarks and later open page with specific results.

Example:

data-use-url="true"
data-use-url="false"
data-with-enriched-resultsNoString (bool)If this attribute set in true the Algolia quick search is displayed in full view:
Logo
Product name
Product type
Venue name, venue city location
Price
Default value: false