Vue-quick-search-all-vals NPM

Vue Quick Search

A Vue component for adding a search overlay with instant search results to your site.

Install

npm i vue-quick-search --save

Usage

import vueQuickSearch from 'vue-quick-search'

export default {
  name: 'wrapper',
  components: {
    'vue-quick-search': vueQuickSearch
  },
  data () {
    return {
      isActive: false
    }
  },
  methods: {
    getResults (url, callback) {
      callback(200, {
        results: [Object, Object],
        total: 2
      })
    }
  }
}
</script>

<template>
  <div>
    <header class="header">
      <button @click.prevent.stop="(isActive = !isActive)" class="btn">
        <span v-if="!isActive">Search</span>
        <span v-else>Close</span>
      </button>
    </header>
    <vue-quick-search
      :is-active="isActive"
      :get-results="getResults"
      :result-limit="0"
      @hide="(isActive = false)">
      <template slot="no-results" slot-scope="props">
        <div>No results available for {{props.searchTerm}}</div>
      </template>
    </vue-quick-search>
  </div>
</template>

Props

key	description	default	options
`isActive`	Is the search overlay active? Use this to toggle active state.	`false`	`Boolean`
`url`	The URL to call to fetch instant results. This URL is also sent a POST request on form submission unless the `hijackSubmit` method is used. The `\\|val\\|` merge tag is replaced with the search term.	`/search/term/\\|val\\|`	`String`
`formAction`	The `action=""` attribute value of the search form.	`/search`	`String`
`formInputName`	The `name=""` attribute value of the search input.	`q`	`String`
`formInputType`	The `type=""` attribute value of the search input.	`Text`	`String`
`formInputLabel`	The `<label>` text for the search input.	`Search by keyword, style, etc...`	`String`
`formSubmitTitle`	The `title=""` and `aria-label=""` attribute values for the form submit button.	`Fetch search results`	`String`
`filterResults`	A method to filter results before rendering them.	`(result) => result`	`Function`
`filterAJAXUrl`	A method to mutate the AJAX url before a request is started.	`(endpoint) => endpoint`	`Function`
`getResults`	A method to get requests from a data source of choice. This method is called whenever the search term changes. If not supplied, a AJAX call will be requested to `url`.	`(url, callback) => nanoajax.ajax({url}, callback)`	`Function`
`resultLimit`	The amount of results to show.	`5`	`Number`
`exitDelay`	A time delay before the user navigates away from the page via form submission or a click on a result listing. Helpful if you need to fire tracking events.	`300`	`Number`
`hijackSubmit`	A method called when the form gets submitted. Helpful if you need to send the user to a different location.	`form => form.submit()`	`Function`
`decodeResults`	A method called when the AJAX request has completed. Use this to decode the AJAX response, returning a `{total: Number, results: Array}` object.	See below	`Function`

The default `decodeResults` method:

function decodeResults (response) {
  if (typeof response === 'string') {
    response = JSON.parse(response)
  }
  return {
    results: response.results || [],
      total: response['total'] || 0
  }
}

Events

event	description	output
`exit`	The user is about to leave the page (called immediately, irrespective of `exitDelay`).	The current search term
`focus`	A focus event was fired on the form input.	Event
`blur`	A blur event was fired on the form input.	Event
`hide`	The overlay should be hidden by changing the `isActive` prop on the parent component.	Event

Slots

<vue-quick-search>
  
  <!-- Props: None -->
  <template slot="submit-button" slot-scope="props">
    <i class="foo">Submit Icon</i>
  </template>
  
  <!-- Props: {item} -->
  <template slot="result" slot-scope="props">
    <img :src="props.item.image" :alt="props.item.title" />
    <p class="result-title">{{props.item.title}}</p>
  </template>
  
  <!-- Props: {searchTerm} -->
  <template slot="no-results" slot-scope="props">
    <div>No results available for {{props.searchTerm}}</div>
  </template>
  
  <!-- Props: None -->
  <template slot="loading" slot-scope="props">
    <p>Loading Results</p>
  </template>
  
  <!-- Props: None -->
  <template slot="form-inputs" slot-scope="props">
    <input type="hidden" name="type" value="foo" />
    <input type="hidden" name="filter" value="bar" />
  </template>
  
  <!-- Props: {activeSearchUrl, resultsCount} -->
  <template slot="results-footer" slot-scope="props">
    <a :href="props.activeSearchUrl">{{props.resultsCount}}</a>
    <span> results returned</span>
  </template>

</vue-quick-search>