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

1
2
3
4
5
<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

1
2
3
4
5
<SearchstaxInputWidget
          :afterAutosuggest="afterAutosuggest"
          :beforeAutosuggest="beforeAutosuggest"
          :suggestAfterMinChars="3"
></SearchstaxInputWidget>

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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.