# vue-predictive-search

> The most flexible search component for vuejs applications with auto suggestion and fuzzy search feature

Latest version **1.0.7** (published 2024-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-predictive-search
pnpm add vue-predictive-search
yarn add vue-predictive-search
bun add vue-predictive-search
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2024-08-10 |
| First published | 2024-01-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 102.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ansima Elvis |
| Maintainers | elvis_kernel00 |
| Keywords | vuejs search component, vue auto-suggestion, vue3 |

## Links

- npm: https://www.npmjs.com/package/vue-predictive-search
- Repository: https://github.com/ElvisAns/VuePredictiveSearch
- Homepage: https://github.com/ElvisAns/VuePredictiveSearch#readme
- Issues: https://github.com/ElvisAns/VuePredictiveSearch/issues
- npm.io page: https://npm.io/package/vue-predictive-search

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.3.11
- [minisearch](https://npm.io/package/minisearch.md) ^6.3.0
- [short-unique-id](https://npm.io/package/short-unique-id.md) ^5.0.3

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2024-08-10
- 1.0.6 — 2024-08-10
- 1.0.4 — 2024-05-26
- 1.0.1 — 2024-01-30
- 1.0.0 — 2024-01-30

## README

# VuePredictiveSearch
VuePredictiveSearch is a Vue.js component that provides a simple yet powerful predictive search feature for your web applications. It supports fuzzy search, making it easy for users to find relevant items even with slight typos or variations.

[![npm version](https://img.shields.io/npm/v/vue-predictive-search.svg)](https://www.npmjs.com/package/vue-predictive-search) [![Total Downloads](https://img.shields.io/npm/dt/vue-predictive-search.svg)](https://www.npmjs.com/package/vue-predictive-search) [![CI](https://github.com/ElvisAns/VuePredictiveSearch/actions/workflows/.ci.yaml/badge.svg?branch=main)](https://github.com/ElvisAns/VuePredictiveSearch/actions/workflows/.ci.yaml)
## Installation
```bash
npm install vue-predictive-search
```

## Using VuePredictiveSearch in Your Project

To integrate `VuePredictiveSearch` into your Vue.js project, you can follow the example code below:

```vue
<script lang="ts" setup>
import { VuePredictiveSearch } from 'vue-predictive-search'
import { ref } from "vue"

const books = ref([
  // Your array of books goes here
]);

const viewUserSelection = (data: Object) => {
  console.log(data)
}
</setup>
<template>
  
  <VuePredictiveSearch @selected="viewUserSelection" inputClasses="searchInput" :source="books" label="title" :fieldsToSearchFrom="['title', 'author', 'genre']" :fieldsToReturnOnMatch="['title', 'author', 'genre', 'price', 'publicationYear','id']" inputPlaceholder="What book are you looking for?">
    <template #no-element-found>
      <p>No element found</p>
    </template>
    <template #item="{ title, author }">
      <div class="item">
        <p>{{ title }}, {{ author }}</p>
      </div>
    </template>
  </VuePredictiveSearch>
</template>
```
## Props

- __source__: Array of items to search from (this component is designed for a flat database structure without nested elements).
- __label__: Key used as a label for each item.
- __fieldsToSearchFrom__: Array of field names to search from.
- __fieldsToReturnOnMatch__: Array of field names to return when a match is found.
- __inputClasses (Optional)__: Custom classes for the search input.
- __inputPlaceholder__ : The placeholder for the search input, default to : 'What are you looking for?'

📌 The component is using slots to allow a high customization, you will bring your own UI, just make sure to attach everything to the proper named slot

## Events
__selected__: Emits the selected item when a user makes a selection.

## Features
- Fuzzy Search: VuePredictiveSearch uses fuzzy search with a matching threshold, allowing users to find items even with typos or variations in the search query.
- Customizable: Easily customize the component with your own templates for no-element-found and each item in the search result list.

## How it Works
The component utilizes the [MiniSearch](https://www.npmjs.com/package/minisearch) library for efficient searching. It performs a fuzzy search with a configurable threshold, ensuring a smooth and user-friendly search experience.

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