# vue-quick-search-all-vals

> A Vue quick search module

Latest version **0.7.0** (published 2020-01-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-quick-search-all-vals
pnpm add vue-quick-search-all-vals
yarn add vue-quick-search-all-vals
bun add vue-quick-search-all-vals
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2020-01-22 |
| First published | 2019-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 570.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | devil1991 |
| Maintainers | devil1991 |

## Links

- npm: https://www.npmjs.com/package/vue-quick-search-all-vals
- Repository: https://github.com/devil1991/vue-quick-search
- Issues: https://github.com/devil1991/vue-quick-search/issues
- npm.io page: https://npm.io/package/vue-quick-search-all-vals

## Dependencies (3)

- [nanoajax](https://npm.io/package/nanoajax.md) ^0.4.3
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [eslint-plugin-vue](https://npm.io/package/eslint-plugin-vue.md) ^5.2.3

## Recent versions

- 0.7.0 (latest) — 2020-01-22
- 0.6.0 — 2020-01-22
- 0.5.0 — 2020-01-22
- 0.4.0 — 2020-01-22
- 0.3.0 — 2020-01-22
- 0.1.0 — 2020-01-22
- 0.0.9 — 2019-10-17
- 0.0.7 — 2019-10-07
- 0.0.6 — 2019-10-07

## README

## Vue Quick Search

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

![Vue Quick Search Example](images/faZQMHBsWT.gif)


#### Install

```bash
npm i vue-quick-search --save
```

#### Usage

``` javascript
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:

```javascript
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";
```

---
_Source: https://npm.io/package/vue-quick-search-all-vals · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._