{"id":15262,"library":"vue-autosuggest","title":"Vue Autosuggest Component","description":"Vue-autosuggest is a Vue.js component designed for building accessible autosuggest, autocomplete, and typeahead input fields. It is currently stable at version 2.2.0 and receives regular updates, often focusing on WAI-ARIA compliance and bug fixes, with new features introduced periodically. Key differentiators include its WAI-ARIA completeness, offering full control over rendering through custom components or built-in defaults, supporting multiple sections for suggestions, and being CSS-agnostic, giving developers complete styling freedom. It also facilitates easy integration with AJAX data fetching for dynamic suggestion lists. The component is rigorously tested and aims for a resilient architecture, providing a robust solution for interactive search inputs.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/darrenjennings/vue-autosuggest","tags":["javascript","vue","autosuggest","autocomplete","enhanced input","typeahead","dropdown","select","combobox"],"install":[{"cmd":"npm install vue-autosuggest","lang":"bash","label":"npm"},{"cmd":"yarn add vue-autosuggest","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-autosuggest","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for the component to function as it's built for Vue 2.","package":"vue","optional":false}],"imports":[{"note":"Use named import for local component registration in Vue components.","wrong":"import VueAutosuggest from 'vue-autosuggest';","symbol":"VueAutosuggest (local)","correct":"import { VueAutosuggest } from 'vue-autosuggest';"},{"note":"For global registration via `Vue.use()`, the default export is typically used. CommonJS `require()` is not supported for modern Vue component usage.","wrong":"const VueAutosuggest = require('vue-autosuggest');","symbol":"VueAutosuggest (global)","correct":"import VueAutosuggest from 'vue-autosuggest';\nVue.use(VueAutosuggest);"},{"note":"While not explicitly documented, for TypeScript users, importing the type can be useful for strict checking, although the component itself is designed for Vue 2.","symbol":"VueAutosuggest (types)","correct":"import type { VueAutosuggest } from 'vue-autosuggest';"}],"quickstart":{"code":"import Vue from 'vue';\nimport { VueAutosuggest } from 'vue-autosuggest';\n\nVue.use(VueAutosuggest); // Register globally, or import locally into a component\n\nnew Vue({\n el: '#app',\n components: {\n VueAutosuggest\n },\n data() {\n return {\n query: '',\n selectedItem: null,\n suggestionsData: [{\n data: ['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn']\n }]\n };\n },\n methods: {\n onInputChange(input) {\n this.query = input;\n console.log('Input changed:', input);\n // In a real application, you would typically fetch suggestions from an API here\n // and update this.suggestionsData based on the input.\n },\n selectHandler(selected) {\n this.selectedItem = selected.item;\n console.log('Item selected:', selected.item);\n },\n clickHandler(event) {\n console.log('Input clicked:', event);\n },\n },\n template: `\n
\n

Vue Autosuggest Example

\n \n \n \n

Selected: {{ selectedItem }}

\n

Current input: {{ query }}

\n
\n `\n});","lang":"javascript","description":"This quickstart initializes a Vue app with the VueAutosuggest component, demonstrating basic setup with static suggestions, input handling, and selection. It showcases both global registration and local component usage patterns."},"warnings":[{"fix":"Migrate to `v-model` for input binding. Replace deprecated event listeners with `@input`, `@focus`, `@blur`, `@selected` (for item selection), `@opened`, and `@closed` (for suggestion list visibility).","message":"Version 2.0.0 introduced significant breaking changes, including built-in `v-model` support, which replaced the `initialValue` prop. Several old events (`onInputChange`, `onClick`, `onBlur`, `onFocus`, `onSelected`) were deprecated and removed in favor of more intuitive native `` events and new custom events.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Review custom CSS or JS that targets WAI-ARIA attributes (`role=\"combobox\"`, `aria-controls`) and adjust selectors to account for their new positions on wrapper elements. Rely on provided CSS classes for styling instead.","message":"Versions 2.2.0 and 2.1.2 implemented WAI-ARIA compliance updates, which involved moving `role=\"combobox\"` and `aria-controls` attributes from the input to a surrounding wrapper. If your styling or JavaScript relied on the precise location of these attributes, it might be affected.","severity":"gotcha","affected_versions":">=2.1.2"},{"fix":"Ensure that the `data` array within each suggestion object is never `null`. Filter out `null` data entries before passing them to the `suggestions` prop, or update to `v2.0.4` or newer.","message":"In versions prior to 2.0.4, providing `suggestions` data containing `null` values (e.g., `suggestions: [{data: null}]`) could lead to cryptic runtime errors.","severity":"gotcha","affected_versions":"<2.0.4"},{"fix":"Update to `v2.0.3` or newer to ensure `inputProps` reactivity. If updating is not an option, consider using a `key` prop on the `vue-autosuggest` component to force re-render when `inputProps` change.","message":"In versions prior to 2.0.3, the `inputProps` were not reactive, meaning changes to the `inputProps` object after initial rendering would not be reflected in the component's input element.","severity":"gotcha","affected_versions":"<2.0.3"},{"fix":"Update to `v2.0.1` or newer. If you cannot update, explicitly set `inputProps.autocomplete = 'off'` to enforce the behavior.","message":"In versions prior to 2.0.1, the `autocomplete=\"off\"` attribute set by default might be unset on subsequent re-renders, potentially causing browser autocomplete features to interfere with the autosuggest.","severity":"gotcha","affected_versions":"<2.0.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure that the `data` property of all suggestion objects is an array, even if empty, and not `null`. Upgrade to `vue-autosuggest@2.0.4` or higher to handle this gracefully.","cause":"The `suggestions` prop was provided with a structure where `data` within a suggestion object was `null`, e.g., `suggestions: [{ data: null }]`.","error":"Error: Cannot read properties of null (reading 'data')"},{"fix":"Update to `vue-autosuggest@2.0.3` or a newer version to enable reactivity for `inputProps`.","cause":"The `inputProps` object passed to the component was not reactive in older versions, preventing dynamic updates to the underlying input element's attributes.","error":"Input props (e.g., placeholder, id) are not updating when their values change."},{"fix":"Upgrade to `vue-autosuggest@2.1.1` or a newer version, which includes a fix that ensures unique keys for section slots.","cause":"In versions prior to 2.1.1, the `v-for` key used for rendering section slots might not have been unique, leading to incorrect re-rendering behavior.","error":"Section slots disappear or render incorrectly, especially after data updates."},{"fix":"Update to `vue-autosuggest@2.1.2` or later. These versions include fixes for ARIA attribute conformance, ensuring correct accessibility implementation.","cause":"Inconsistencies with the WAI-ARIA specification, particularly regarding attribute placement and element referencing, in versions prior to 2.1.2.","error":"ARIA warnings in the console about `aria-labelledby` referencing non-existent elements or `role='combobox'` being misplaced."}],"ecosystem":"npm"}