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.

Installation

npm install VuePredictiveSearch

Using VuePredictiveSearch in Your Project

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

<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']">
    <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.

📌 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 library for efficient searching. It performs a fuzzy search with a configurable threshold, ensuring a smooth and user-friendly search experience.