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>

CSS

Add the following to your stylesheet for basic styles

Styles are minimal so that they don't interfere with your project-specific system

@import "vue-quick-search/dist/vueQuickSearch.css";