# InstantSearch

Modal containing search input and results for instant search requests on input keyup. Usually should be opened by a button on site header to perform quick searches out of search page.

import InstantSearch from '@ecomplus/storefront-components/src/InstantSearch.vue'

# Features

  • Automatic search on term changes (input keyup);
  • Auto-fix search term handling Elasticsearch suggestions (opens new window) by default;
  • Search pagination with "load more" on scroll;
  • Shows most popular items when search returns empty result;
  • List with recent search history;
  • Keep alive search results to prevent unnecessary requests;
  • If parent element is a form, <input name="term"> value will be set with current search term and submit will be fired on click;

# Examples

# Basic example

<instant-search
  :term.sync="term"
  :is-visible.sync="isVisible"
/>

# With form parent and toggle button

<form
  action="/search"
  method="get"
>
  <input name="term" type="hidden">
  <button
    type="button"
    @click="isVisible = true"
  >
    Search
  </button>
  <instant-search :is-visible.sync="isVisible"/>
</form>

# All props/events

<instant-search
  :term.sync="term"
  :isVisible.sync="isVisible"
  :pageSize="4"
  :autoFixScore="0.8"
  :searchEngineProps="{}"
  :productCardProps="{
    isSmall: false,
    headingTag: 'h4'
  }"
/>

# Props

# term

Initial search term, may be changed by user on search input.

May be used with .sync modifier.

term: {
  type: String,
  default: ''
},

# is-visible

Defines whether the modal is visible or closed.

May be used with .sync modifier.

isVisible: {
  type: Boolean,
  default: true
},

# page-size

The maximum number of products returned per search request. When total results for current search term is greater than page size, more items (next page) will be loaded automatically on scroll.

pageSize: {
  type: Number,
  default: 8
},

# auto-fix-score

Elasticsearch suggesters (opens new window) score to match and auto fix search term when original term returns empty result. Bigger score means less auto corrections, set 0 or 1 to disable.

autoFixScore: {
  type: Number,
  default: 0.83
},

# search-engine-props

Props for SearchEngine child component.

searchEngineProps: Object,

# product-card-props

Prop for ProductCard child components.

productCardProps: {
  type: Object,
  default () {
    return {
      isSmall: true
    }
  }
},

# Events

# update:term

Emitted when search term is changed locally.

Triggers .sync modifier for term.

this.$emit('update:term', term)

# update:is-loaded

Emitted when user clicks to close the modal.

Triggers .sync modifier for is-visible.

this.$emit('update:is-visible', false)

# Slots

Place to overwrite entire instant search modal header.

<instant-search :term.sync="term">
  <template #header="{ isSearching }">
    <header class="search__custom-header">
      <input
        type="search"
        class="search__input form-control"
        v-model="term"
      >
      <div
        v-if="isSearching"
        class="search__spinner spinner-grow"
        role="status"
      >
        <span class="sr-only">Loading...</span>
      </div>
    </header>
  </template>
</instant-search>

# count-results

Place to customize results counter on footer.

<instant-search>
  <template #count-results="{ hasSearched, totalSearchResults }">
    <transition enter-active-class="animated fadeInDown">
      <div
        v-if="hasSearched"
        class="search__count"
      >
        Found <strong>{{ totalSearchResults }}</strong> items
      </div>
    </transition>
  </template>
</instant-search>

# history

Place to customize search history list.

<instant-search :term.sync="term">
  <template #history="{ history }">
    | <a
      class="search__history-link"
      v-for="historyTerm in history"
      href="#"
      @click.prevent="term = historyTerm"
      v-text="historyTerm"
    ></a>
  </template>
</instant-search>

# search-engine

Place to overwrite default search engine component on modal body.

<instant-search>
  <template #search-engine="{ term }">
    <custom-search-engine :term="term"/>
  </template>
</instant-search>

← LoginModal →