@tomickigrzegorz/autocomplete-vue

@tomickigrzegorz/autocomplete-vue

Vue 3 wrapper for @tomickigrzegorz/autocomplete.

Installation

npm install @tomickigrzegorz/autocomplete-vue @tomickigrzegorz/autocomplete
# or
yarn add @tomickigrzegorz/autocomplete-vue @tomickigrzegorz/autocomplete

Usage

<script setup lang="ts">
import { AutocompleteInput } from "@tomickigrzegorz/autocomplete-vue";
import "@tomickigrzegorz/autocomplete/css";

const onSearch = async ({ currentValue }) => {
  const res = await fetch(`/api/search?q=${currentValue}`);
  return res.json();
};

const onResults = ({ currentValue, matches }) =>
  matches.map((el) => `<li>${el.name}</li>`).join("");

const onSubmit = ({ object }) => {
  console.log("selected:", object);
};
</script>

<template>
  <div class="auto-search-wrapper">
    <AutocompleteInput
      :onSearch="onSearch"
      :onResults="onResults"
      :onSubmit="onSubmit"
      placeholder="Search..."
    />
  </div>
</template>

Props

All props mirror AutocompleteOptions from the core library.

Updating props

Callback props (onSearch, onResults, onSubmit, …) always call the latest function passed to the component, so they can be changed at any time without re-creating the autocomplete.

Other options (delay, cache, dropdownParent, classPrefix, …) are read once on mount. To apply a new value, re-mount the component with a key:

<AutocompleteInput :key="delay" :delay="delay" :onSearch="onSearch" :onResults="onResults" />

Demo

cd examples/vue
yarn install
yarn dev

License

MIT