SearchstaxInputWidget for Vue

The SearchStax Site Search solution offers a Vue input widget to assist with you custom search page.

The SearchstaxInputWidget provides a search input box with autosuggest/autocomplete functionality.

Usage

<SearchstaxInputWidget
          :afterAutosuggest="afterAutosuggest"
          :beforeAutosuggest="beforeAutosuggest"
          :suggestAfterMinChars="3"
></SearchstaxInputWidget>

Props

afterAutosuggest – Callback function invoked after autosuggest results are received. Allows modifying the suggestions.
beforeAutosuggest – Callback function invoked before making the autosuggest API call. Allows modifying the request parameters.
searchInputId – ID of the search input element. Default: searchstax-search-input
suggestAfterMinChars – Minimum number of characters required to trigger autosuggest. Default: 3

Slots

#input

Allows customizing the input box UI.

Slot props:

suggestions – Array of autosuggestion results
onMouseLeave – Handler for mouse leave event
onMouseOver – Handler for mouse over event
onMouseClick – Handler for mouse click event

Usage

<SearchstaxInputWidget
          :afterAutosuggest="afterAutosuggest"
          :beforeAutosuggest="beforeAutosuggest"
          :suggestAfterMinChars="3"
></SearchstaxInputWidget>

Example

<SearchstaxInputWidget
          :afterAutosuggest="afterAutosuggest"
          :beforeAutosuggest="beforeAutosuggest"
          :suggestAfterMinChars="3"
>
	<template #input="{ suggestions, onMouseLeave, onMouseOver, onMouseClick }">
            <div class="searchstax-search-input-wrapper">
              <input
                type="text"
                id="searchstax-search-input"
                class="searchstax-search-input"
                placeholder="SEARCH FOR..."
              />
              <div
                class="searchstax-autosuggest-container"
                :class="{ 'hidden': suggestions.length === 0 }"
                @mouseleave="onMouseLeave"
              >
                <div
                  class="searchstax-autosuggest-item"
                  v-for="suggestion in suggestions"
                  :key="suggestion.term"
                >
                  <div
                    class="searchstax-autosuggest-item-term-container"
                    v-html="suggestion.term"
                    @mouseover="onMouseOver(suggestion)"
                    @click.stop="onMouseClick()"
                  ></div>
                </div>
              </div>
              <button
                class="searchstax-spinner-icon"
                id="searchstax-search-input-action-button"
              >
              </button>
            </div>
	</template>
</SearchstaxInputWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.