{"id":15566907,"url":"https://github.com/kazanexpress/vue-simple-suggest","last_synced_at":"2025-04-07T23:13:30.114Z","repository":{"id":30219794,"uuid":"123589166","full_name":"KazanExpress/vue-simple-suggest","owner":"KazanExpress","description":"Feature-rich autocomplete component for Vue.js","archived":false,"fork":false,"pushed_at":"2024-02-03T16:15:51.000Z","size":2811,"stargazers_count":460,"open_issues_count":61,"forks_count":73,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-07T13:39:09.044Z","etag":null,"topics":["accessibility","aria","autocomplete","autocomplete-component","autocomplete-suggestions","autosuggest","autosuggestion","customizable","frontend","hacktoberfest","search","suggest","suggestions","versatile","vue","vue-components","vuejs","wai-aria","zero-config","zero-configuration"],"latest_commit_sha":null,"homepage":"https://kazanexpress.github.io/vue-simple-suggest/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KazanExpress.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-03-02T14:29:02.000Z","updated_at":"2025-04-07T07:35:37.000Z","dependencies_parsed_at":"2024-01-07T12:55:17.980Z","dependency_job_id":"d2741e68-b43d-4bcb-9a08-e9b8add80ec4","html_url":"https://github.com/KazanExpress/vue-simple-suggest","commit_stats":{"total_commits":544,"total_committers":19,"mean_commits":28.63157894736842,"dds":0.4742647058823529,"last_synced_commit":"2381003c162b0e71cac52996b42cccbc35c61b59"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KazanExpress%2Fvue-simple-suggest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KazanExpress%2Fvue-simple-suggest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KazanExpress%2Fvue-simple-suggest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KazanExpress%2Fvue-simple-suggest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KazanExpress","download_url":"https://codeload.github.com/KazanExpress/vue-simple-suggest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744335,"owners_count":20988783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","aria","autocomplete","autocomplete-component","autocomplete-suggestions","autosuggest","autosuggestion","customizable","frontend","hacktoberfest","search","suggest","suggestions","versatile","vue","vue-components","vuejs","wai-aria","zero-config","zero-configuration"],"created_at":"2024-10-02T17:08:27.837Z","updated_at":"2025-04-07T23:13:30.083Z","avatar_url":"https://github.com/KazanExpress.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-simple-suggest\n\n\u003e Simple yet feature-rich autocomplete component for Vue.js\n\n\n[![npm](https://img.shields.io/npm/v/vue-simple-suggest.svg?style=flat-square)](https://www.npmjs.com/package/vue-simple-suggest \"NPM package page\")\n[![live demo](https://img.shields.io/badge/demo-live-brightgreen.svg?style=flat-square)](https://kazanexpress.github.io/vue-simple-suggest/ \"Live playground\")\n[![github repo](https://img.shields.io/badge/github-repo-lightgray.svg?style=flat-square)](https://github.com/KazanExpress/vue-simple-suggest \"GitHub repository\")\n[![vue-awesome link](https://img.shields.io/badge/very-awesome-orange.svg?style=flat-square)](https://github.com/vuejs/awesome-vue#autocomplete \"Our section at the vue-awesome repository\")\n[![npm](https://img.shields.io/npm/dm/vue-simple-suggest.svg?style=flat-square)](https://www.npmjs.com/package/vue-simple-suggest \"Downloads per month\")\n[![All Contributors](https://img.shields.io/badge/contributors-25-blueviolet.svg?style=flat-square)](#contributors \"Our awesome contributors!\")\n\n## Install\n\n```bash\nnpm install --save vue-simple-suggest\n```\n\nSee [installation guide](#installation) for more options.\n\n## Table of contents\n\n- [vue-simple-suggest](#vue-simple-suggest)\n  - [Install](#install)\n  - [Table of contents](#table-of-contents)\n  - [What is it](#what-is-it)\n    - [Features](#features)\n    - [New features?](#new-features)\n  - [Examples:](#examples)\n    - [Simple example](#simple-example)\n    - [Async example](#async-example)\n  - [Installation](#installation)\n    - [NPM](#npm)\n    - [Unpkg](#unpkg)\n    - [Importing](#importing)\n      - [Polyfills](#polyfills)\n    - [Usage](#usage)\n  - [Build Setup](#build-setup)\n  - [Default Controls](#default-controls)\n  - [Component API](#component-api)\n    - [TLDR](#tldr)\n    - [CSS class structure](#css-class-structure)\n      - [Transitions](#transitions)\n    - [API definitions](#api-definitions)\n      - [Props](#props)\n        - [mode](#mode)\n      - [Emitted Events](#emitted-events)\n      - [Ref Methods](#ref-methods)\n      - [Ref Event Handlers](#ref-event-handlers)\n      - [Ref Data](#ref-data)\n    - [Slots](#slots)\n        - [Custom input](#custom-input)\n        - [Accessibility on custom input](#accessibility-on-custom-input)\n        - [Custom suggestion item](#custom-suggestion-item)\n        - [Custom miscellaneous item slots](#custom-miscellaneous-item-slots)\n  - [Contributors](#contributors)\n\n\n## What is it\n\nThis is a simple yet feature-rich suggestion/autocomplete component for Vue.js.\n\nActually, it's so feature rich, that it's possible to do crazy stuff with it, like\n  - Imitating drop-downs and drop-down menus\n  - Turn suggestions list into an actual suggestions table\n  - Work with ANY type of custom input passed (like type=button, radio and etc.)\n  - ... And many more things\n\nAnd, as a bonus, it is very light.\n\n### Features\n\n- `v-model` support.\n- Automatic [accessibility attributes](#accessibility-on-custom-input) (WAI-ARIA complete)\n- Switching `v-model` type (select/input).\n- [Custom input](#custom-input) element through default slot.\n- [Custom list items](#custom-suggestion-item) through named scoped slots.\n- All HTML5-valid props for default input element are provided (`type`, `tabindex` and etc...).\n- Customizable [keyboard controls](#default-controls).\n- Rich and simple [API](#api-definitions).\n- [CSS classes](#css-class-structure) for quick and easy restyling.\n- Many build variants to choose from.\n- Flexible and customizable component design.\n- Optional polyfills for IE importable from the lib.\n\nAll of the props, events and slots are OPTIONAL for this component, so it can be used without any configuration at all.\n\n### New features?\n\nIf you feel that something important is missing (or found a bug) - feel free to [create an issue](https://github.com/KazanExpress/vue-simple-suggest/issues/new). :)\n\n-----\n\n## Examples:\n\nTo use the component just install via NPM:\n\n`npm install --save vue-simple-suggest`\n\nThen, in your Vue.js component/page do the following...\n\n### Simple example\n\nIf you need to suggest things from a static array:\n\n```html\n\u003c!-- Some component.vue --\u003e\n\u003ctemplate\u003e\n  \u003cvue-simple-suggest\n    v-model=\"chosen\"\n    :list=\"simpleSuggestionList\"\n    :filter-by-query=\"true\"\u003e\n\u003c!-- Filter by input text to only show the matching results --\u003e\n  \u003c/vue-simple-suggest\u003e\n\n  \u003cbr\u003e\n\n  \u003cp\u003eChosen element: {{ chosen }}\u003c/p\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import VueSimpleSuggest from 'vue-simple-suggest'\n  import 'vue-simple-suggest/dist/styles.css' // Optional CSS\n\n  export default {\n    components: {\n      VueSimpleSuggest\n    },\n    data() {\n      return {\n        chosen: ''\n      }\n    },\n    methods: {\n      simpleSuggestionList() {\n        return [\n          'Vue.js',\n          'React.js',\n          'Angular.js'\n        ]\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n### Async example\n\nIf you're dealing with async data from server (example using https://swapi.co/):\n\n```html\n\u003c!-- Some component.vue --\u003e\n\u003ctemplate\u003e\n  \u003cvue-simple-suggest\n    v-model=\"chosen\"\n    display-attribute=\"name\"\n    value-attribute=\"url\"\n    :list=\"getSuggestionList\"\n  \u003e\u003c/vue-simple-suggest\u003e\n\n  \u003cbr\u003e\n\n  \u003cp\u003eChosen element: {{ chosen }}\u003c/p\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import VueSimpleSuggest from 'vue-simple-suggest'\n  import 'vue-simple-suggest/dist/styles.css' // Optional CSS\n\n  export default {\n    components: {\n      VueSimpleSuggest\n    },\n    data() {\n      return {\n        chosen: ''\n      }\n    },\n    methods: {\n      // Function returning a promise as a factory for suggestion lists.\n      //\n      // vue-simple-suggest calls it automatically when an update to the list is needed,\n      // no need for watchers here!\n      getSuggestionList() {\n        return fetch('https://swapi.co/api/people', { method: 'GET' })\n          .then(response =\u003e response.json())\n          .then(json =\u003e json.results); /*\n          returns a promise with a list of star-wars characters\n        */\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\nFor a more advanced example (using wikipedia search)\nsee our [example source](https://github.com/KazanExpress/vue-simple-suggest/blob/master/example/src/App.vue).\n\n-----\n\n## Installation\n\n### NPM\n\n```bash\nnpm install --save vue-simple-suggest\n# or\nyarn add vue-simple-suggest\n```\n\n### Unpkg\n\nIf including via this method - the component will automatically install itself.\n\n```html\n\u003c!-- UMD Component, async/await polyfills through promises --\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vue-simple-suggest\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vue-simple-suggest@1.5.1\"\u003e\u003c/script\u003e\n                                                              \u003c!-- Specific version --\u003e\n\n\u003c!-- CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-simple-suggest/dist/styles.css\"\u003e\n\n\u003c!-- If you need polyfills, use IIFE verision below --\u003e\n\u003c!-- IIFE build includes ALL polyfills: Object.assign, Promises, Generators, Async/Await! --\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vue-simple-suggest/dist/iife.js\"\u003e\u003c/script\u003e\n```\n\n### Importing\n\n```js\n/// ESNext (original code, no pollyfills, single-file .vue component, css included)\nimport VueSimpleSuggest from 'vue-simple-suggest/lib'\n///\n\n/// ES6 (async polyfills)\nimport VueSimpleSuggest from 'vue-simple-suggest'\n// or, if you have problems importing:\nimport VueSimpleSuggest from 'vue-simple-suggest/dist/es6'\n///\n\n/// ES7 and above (no polyfills)\nimport VueSimpleSuggest from 'vue-simple-suggest/dist/es7'\n///\n\n/// CommonJS (async, arrow-functions and promises are polyfilled)\nconst VueSimpleSuggest = require('vue-simple-suggest')\n// or, if you have problems importing:\nconst VueSimpleSuggest = require('vue-simple-suggest/dist/cjs')\n///\n\n// Optional - import css separately with css loaders:\nimport 'vue-simple-suggest/dist/styles.css'\n```\n\n#### Polyfills\n\u003e New in `v1.8.3`\n\n`vue-simple-suggest` comes with minimal optional polyfills for IE11+ - `Object.assign`, `Element.prototype.closest` and `Element.prototype.matches`.\nYou can import them like this:\n```js\nimport 'vue-simple-suggest/lib/polyfills';\n// or\nrequire('vue-simple-suggest/lib/polyfills');\n```\n\n### Usage\n\n**Globaly:**\n\n```js\n// You don't need to do it, if including via \u003cscript\u003e (umd, iife)\nVue.component('vue-simple-suggest', VueSimpleSuggest)\n```\n\n**In single-file .vue components:**\n\n```html\n\u003cscript\u003e\n  import VueSimpleSuggest from 'vue-simple-suggest'\n  import 'vue-simple-suggest/dist/styles.css' // Using a css-loader\n\n  export default {\n    components: {\n      VueSimpleSuggest\n    }\n  }\n\u003c/script\u003e\n```\n\n-----\n\n## Build Setup\n\n``` bash\n# clone the repo\ngit clone https://github.com/KazanExpress/vue-simple-suggest.git\ncd ./vue-simple-suggest\n\n# install dependencies\nnpm install\n\n# serve example with hot reload at localhost\nnpm run dev\n\n# build example \u0026 readme for static serving\nnpm run docs\n```\n\n-----\n## Default Controls\n\n\u003e New in [v1.2.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.2.0)\n\nThese are default keyboard shortcuts.\n\nCan be customized with the [`controls` prop](#props). All fields in this `controls` object are optional.\n\nDefault scheme:\n\n|Key (key code) | Description|\n|-|-|\n|`Escape` (27) | If the suggestions list is shown - hide it. Defined by `hideList` property. |\n|`ArrowDown` (40) | If the suggestions list is hidden - show it.  Defined by `showList` property. |\n|`ArrowUp` (38) / `ArrowDown` (40) | Cycle (hover) through suggestions.  Defined by `selectionUp`/`selectionDown` properties respectfully. |\n|`Enter` (13) | If the list is shown - chooses the highlighted element.  Defined by `select` property.|\n|`(Ctrl/Shift) + Space` (32) | Select the first element in the list.  Defined by `autocomplete` property. Works with `Ctrl` modifier key or `Shift` modifier key. |\n|`(Ctrl/Shift) + Enter` (13) | Same as previous, but also hides the suggestions list. |\n\nJS object:\n```js\n{\n  selectionUp: [38],\n  selectionDown: [40],\n  select: [13],\n  showList: [40],\n  hideList: [27],\n  autocomplete: [32, 13]\n}\n```\n\n-----\n## Component API\n\n### TLDR\n\u003cdetails\u003e\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n```html\n\u003c!-- Ref to access the API, v-model for efficient query binding --\u003e\n\u003cvue-simple-suggest ref=\"vueSimpleSuggest\" v-model=\"model\"\n  value-attribute=\"id\"\n  display-attribute=\"title\"\n  mode=\"input\"\n  placeholder=\"placeholder!!!\"\n  :list=\"getListFunction\"\n  :max-suggestions=\"10\"\n  :min-length=\"3\"\n  :debounce=\"100\"\n  :destyled=\"false\"\n  :remove-list=\"false\"\n  :filter-by-query=\"false\"\n  :filter=\"customFilterFunction\"\n  :value=\"defaultValue\"\n  :nullable-select=\"true\"\n  :controls=\"{\n    selectionUp: [38, 33],\n    selectionDown: [40, 34],\n    select: [13, 36],\n    showList: [40],\n    hideList: [27, 35],\n    autocomplete: [32, 13],\n  }\"\n  @input=\"onInputEvent\"\n  @select=\"onSuggestSelect\"\n  @hover=\"onSuggestHover\"\n  @focus=\"onFocus\"\n  @blur=\"onBlur\"\n  @request-start=\"onRequestStart\"\n  @request-done=\"onRequestDone\"\n  @request-failed=\"onRequestFailed\"\n  @show-list=\"onShowList\"\n  @hide-list=\"onHideList\"\n\u003e\n  \u003c!-- v-model on input itself is useless --\u003e\n  \u003cinput class=\"optional-custom-input\"\u003e\n\n  \u003c!-- Appears o top of the list --\u003e\n  \u003ctemplate slot=\"misc-item-above\" slot-scope=\"{ suggestions, query }\"\u003e\n    \u003cdiv class=\"misc-item\"\u003e\n      \u003cspan\u003eYou're searching for {{ query }}.\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"misc-item\"\u003e\n      \u003cspan\u003e{{ suggestions.length }} suggestions are shown...\u003c/span\u003e\n    \u003c/div\u003e\n    \u003chr\u003e\n  \u003c/template\u003e\n\n  \u003cdiv slot=\"suggestion-item\" slot-scope=\"{ suggestion }\" class=\"custom\"\u003e{{ suggestion.title }}\u003c/div\u003e\n\n  \u003c!-- Appears below the list --\u003e\n  \u003cdiv class=\"misc-item\" slot=\"misc-item-below\" slot-scope=\"{ suggestions }\" v-if=\"loading\"\u003e\n    \u003cspan\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/vue-simple-suggest\u003e\n```\n\n\u003c/details\u003e\n\n-----\n\n### CSS class structure\n\nIf there's a need to customize the appearance of the component, here's the internal class-structure:\n\n```less\n// .designed is applied only if `destyled` prop is false.\n.vue-simple-suggest.designed.focus // .focus is applied whenever the component is focused.\n  .input-wrapper\n    .default-input // Replaced with your custom input if default slot is provided.\n  .suggestions // Also has transition classes, see below.\n    .suggest-item\n```\n\nIf you wish to use your existing classes, or frameworks like Bootstrap you can inject your own classes using the `'styles'` prop:\n\n```html\n\u003c!-- Some component.vue --\u003e\n\u003ctemplate\u003e\n  \u003cvue-simple-suggest\n    v-model=\"chosen\"\n    :list=\"simpleSuggestionList\"\n    :styles=\"autoCompleteStyle\"\n    :destyled=true\n    :filter-by-query=\"true\"\u003e\n  \u003c/vue-simple-suggest\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  ...\n  export default {\n    ...\n    data() {\n      return {\n        autoCompleteStyle : {\n          vueSimpleSuggest: \"position-relative\",\n          inputWrapper: \"\",\n          defaultInput : \"form-control\",\n          suggestions: \"position-absolute list-group z-1000\",\n          suggestItem: \"list-group-item\"\n        }\n      }\n    },\n    ...\n  }\n\u003c/script\u003e`\n\n\u003cstyle lang=\"scss\"\u003e\n.z-1000 {\n  z-index: 1000;\n}\n.hover {\n  background-color: #007bff;\n  color: #fff;\n}\n\u003c/style\u003e\n```\n\nScheme:\n\n|Property | Description|\n|-|-|\n|`vueSimpleSuggest` | Additional classname for component's root element. |\n|`inputWrapper` | Additional classname for `.input-wrapper` element. |\n|`defaultInput` | Additional classname for `input` element if no custom input component is given. |\n|`suggestions` | Additional classname for suggestions list `ul` element. |\n|`miscItemAbove` | Classname for `misc-item-above` slot wrapper (`li` element itself). |\n|`suggestItem` | Additional classname for suggestion item `li` element. |\n|`miscItemBelow` | Classname for `misc-item-below` slot wrapper (`li` element itself). |\n\n-----\n#### Transitions\n\u003e New in [v1.8.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.8.0)\n\nYou can also define custom list transitions by defining css rules for the transition named `vue-simple-suggest` on the `.suggestions` div:\n\n```css\n.suggestions {\n  /* It's improtant to have a cpecific pivot point for transition:*/\n  opacity: 1;\n}\n\n.vue-simple-suggest-enter-active.suggestions,\n.vue-simple-suggest-leave-active.suggestions {\n  /* Transition length here:*/\n  transition: opacity .2s;\n}\n\n.vue-simple-suggest-enter.suggestions,\n.vue-simple-suggest-leave-to.suggestions {\n  /* Transition rule for \"disengaged\" element:*/\n  opacity: 0;\n}\n```\n\n\n\n-----\n### API definitions\n\n#### Props\n\n| Name                           | Type     | Default  | Description         |\n|--------------------------------|----------|----------|--------------------------------------------------------------|\n| `controls` \u003csup\u003e[v1.2.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.2.0)\u003c/sup\u003e                    | Object   | See [default controls](#default-controls)  | Determines the keyboard shortcuts in key-codes (for browser-compatibility purposes). Arrays provide the ability to assign multiple keys to one action. Consists of 5 array fields: `selectionUp`, `selectionDown`, `select`, `hideList` and `autocomplete`, all of which are optional. |\n| `max-suggestions`               | Number   | `10`       | The maximum amount of suggestions to display. Set to 0 for infinite suggestions. |\n| `min-length`               | Number   | `1`       | The minimum amount of symbols in input to trigger suggestion list. `vue-simple-suggest` starts behaving as a dropdown menu, if the value is 0. |\n| `display-attribute`             | String   | `'title'`  | The property in a suggestion object to display in a list. Supports dotted paths. |\n| `value-attribute`               | String   | `'id'`     | The property in a suggestion object to use as a unique key. Supports dotted paths. |\n| `list`                      | Function or Array | `() =\u003e []` | The array provider function, must accept a query as its only argument. Can return an array or a promise. Can be async. The component behaves as a simple input without this function. |\n| `debounce`                     | Number   | `0`        | Determines the `list` debounce (a time between the input event and a function execution). |\n| `destyled`                     | Boolean  | `false`    | Whether to cancel the default styling of input and suggestions list. |\n| `styles` \u003csup\u003e[v1.8.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.8.0)\u003c/sup\u003e                    | Object  | `{}`    | CSS classes to attach with current component style. |\n| `remove-list`                   | Boolean  | `false`    | If true - the suggestion list will be always hidden. |\n| `filter-by-query`                | Boolean  | `false`    | Whether to filter the resulting suggestions by input's text query (make it a search component). |\n| `filter` | Function | - | A custom function for filtering the suggestion results that accepts a single item and a query to filter by as its 2 arguments. Used only if `filter-by-query` is set to `true`. |\n| `mode` \u003csup\u003e[v1.4.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.4.0)\u003c/sup\u003e                         | String | `'input'` | The `v-model` event. Determines the event, that triggers `v-model`. Can be one of `'input'` (`v-model` binds a displayed property) or `'select'` (`v-model` binds a selected item). |\n| `type`, `value`, `pattern`, etc...   |          |            | All of the HTML5 input attributes with their respected default values. |\n| `nullable-select` \u003csup\u003e[v1.9.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.9.0)\u003c/sup\u003e                    | Boolean  | `false`    | Whether the `select` should accept `null` or not. |\n|`preventHide` \u003csup\u003e[v1.11.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.11.0)\u003c/sup\u003e|Boolean|`false`|Whether to keep the input open or not, allowing the user to select multiple inputs|\n\n##### mode\n\u003e New in [v1.4.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.4.0)\n\nDetermines the event, that triggers `v-model`. Can be one of `'input'` (default) or `'select'`.\n\nFor example, if `'input'` is chosen - then v-model will update the value each time an [`input`](#emitted-events) event is fired, setting the input's string.\n\nSame is for `'select'` - v-model changes only when something is selected from the list, setting the selected value (string, object or whatever) to its argument.\n\nA proper use-case for it being when one wants to use the component only for selection binding and custom input for text binding:\n\n```html\n\u003cvue-simple-suggest v-model=\"selected\" mode=\"select\"\u003e\n  \u003cinput v-model=\"text\"\u003e\n\u003c/vue-simple-suggest\u003e\n```\n\n-----\n#### Emitted Events\n| Name            | Arguments                   | Description                                                                                            |\n|-----------------|-----------------------------|--------------------------------------------------------------------------------------------------------|\n| `input`         | HTML input event            | An outward projection of the current input's event.                                                    |\n| `focus`         | HTML focus event            | An outward projection of the current input's event.                                                    |\n| `blur`          | HTML focus event            | An outward projection of the current input's event.                                                    |\n| `select`        | Selected suggestion         | Fires on suggestion selection (via a mouse click or enter keypress).                                   |\n| `hover`         | Hovered suggestion, target element          | Fires each time a new suggestion is highlighted (via a cursor movement or keyboard arrows).            |\n| `suggestion-click`        | Selected suggestion, HTML click event        | Fires on suggestion element click.                                   |\n| `show-list`      | -                           | Fires each time the suggestion list is toggled to be shown.                                            |\n| `hide-list`      | -                           | Fires each time the suggestion list is being hidden.                                                   |\n| `request-start`  | Current input value (query) | Fires each time a `list` function starts executing.                                                 |\n| `request-done`   | Resulting suggestions list  | Fires when a `list` function successfully returns a result and forwards that result as an argument. |\n| `request-failed` | The interrrupting exception | Fires if an exception occurs during the execution of a `list` funciton.                             |\n\n-----\n\n#### Ref Methods\n\u003e accessed via `$refs.*your ref name here*`\n\n| Name | Arguments | Description |\n|------|-----------|-------------|\n|`showList`| - | Shows the suggestion list. Emits the respected [event](#emitted-events). |\n|`hideList`| - | Hides the suggestion list. Emits the respected [event](#emitted-events). |\n|`getSuggestions`| `query`: string | Gets and processes suggestions from the `list` prop. Returns a promise. Emits the `requestStart`, `requestDone` and `requestFailed` [events](#emitted-events). |\n|`research`| - | Debounced `getSuggestions` on the current input value. |\n|`clearSuggestions`| - | Clears the `suggestions` array. |\n|`select`| suggestion | Selects the passed suggestion. Emits the respected [event](#emitted-events). |\n|`hover`| suggestion | Hovers over the passed suggestion. Emits the respected [event](#emitted-events). |\n|`displayProperty`| suggestion | Returns the displayed property of a suggestion. |\n|`valueProperty`| suggestion | Returns the value property of a suggestion. |\n|`setText` \u003csup\u003ev1.9.0\u003c/sup\u003e | text | Reliably sets custom text to the input field. |\n|`autocompleteText` \u003csup\u003ev1.10.0\u003c/sup\u003e | suggestion | Autocompletes the input text using the suggestion passed as the only argument. |\n\n-----\n\n#### Ref Event Handlers\n\u003e accessed via `$refs.*your ref name here*`\n\nYou can use these to imitate some of the component's behaviours.\n\n| Name | Arguments | Description |\n|------|-----------|-------------|\n|`onShowList`|| Invoked when a suggestion list needs to be shown. |\n|`showSuggestions`|| Shows suggestion list, refreshes the data if needed. |\n|`onInput`| HTML input event | Invoked whenever the input text is changed. Emits the [`input`](#emitted-events) event. |\n|`onFocus`| HTML focus event | Invoked whenever the input comes into focus, emits the [`focus`](#emitted-events) event. |\n|`onBlur`| HTML focus event | Antonym to `onFocus`. |\n|`onAutocomplete`| - | Invoked when the autocomplete [keyboard shortcut](#default-controls) is pressed. Selects the first suggestion. |\n|`onListKeyUp`| HTML keyup event | Invoked on component keyup. Internally used for hiding the list. |\n|`onKeyDown`| HTML keydown event | Invoked on component keydown. Internally used for showing the list, updating suggestions and preventing form submit. |\n|`moveSelection`|| Invoked when hovered element needs to be changed. |\n|`suggestionClick`| `suggestion`, HTML click event | Invoked on any suggestion click. Can be used to emulate such a click from ouside of the component. |\n\n-----\n\n#### Ref Data\n\u003e accessed via `$refs.*your ref name here*`\n\n| Name | Default | Description |\n|------|-----------|-------------|\n|`selected`| `null` | Currently selected element. |\n|`hovered`| `null` | Currently hovered element. |\n|`suggestions`| `[]` | Current suggestions list. |\n|`textLength`| `0` | Length of the text in the input. |\n|`listShown`| `false` | Is suggestion list shown. |\n|`inputElement`| `null` | Currently used HTMLInputElement. |\n|`canSend`| `true` | Whether the assigned getListFuncion can be executed. |\n|`timeoutInstance`| `null` | The timeout until next getListFunction execution. |\n|`text`| `$props.value` | Current input text. |\n|`slotIsComponent`| `false` | Whether this current custom input is a vue-component. |\n|`listIsRequest`| - | Whether the list prop is a function. |\n|`input`| - | A ref to the current input (component or vanilla). |\n|`hoveredIndex`| - | The current hovered element index. |\n|`controlScheme`| [Default Controls](#default-controls) | The current controls scheme. |\n|`isPlainSuggestion`| `false` | Whether the current suggestions list consists of plain strings (not objects). |\n|`isClicking`| `false` | `true` if the user currently clicks. |\n|`isOverList`| `false` | `true` if the user currently hovers over suggestions list. |\n|`isInFocus`| `false` | `true` if the component is currently in focus. |\n|`isTabbed`| `false` | `true` if the user pressed tab, while the component is in focus. |\n|`isSelectedUpToDate`| `false` | `true` if the user hasn't done any inputs since the last selection, so the selection is still relevant. |\n\n-----\n\n### Slots\n\n##### Custom input\n\u003e default slot (optional)\n\nSupports nesting. Input props can be passed to a custom input to avoid their processing by vue-simple-suggest.\nDefaults to a simple input with props passed to vue-simple-suggest.\n\n**Warning:** `v-model` on a custom input IS NOT the same as `v-model` on vue-simple-suggest!\n\n```html\n\u003c!--  Default HTMLInputElement example:  --\u003e\n\u003cvue-simple-suggest v-model=\"model\" placeholder=\"Text here\" type=\"search\" pattern=\"[a-z]+\"/\u003e\n```\n```html\n\u003c!--  Vanilla HTMLInputElement example 1:  --\u003e\n\u003cvue-simple-suggest\u003e\n  \u003cinput pattern=\"[a-z]+\"\u003e\n\u003c/vue-simple-suggest\u003e\n```\n```html\n\u003c!--  Vanilla HTMLInputElement example 2:  --\u003e\n\u003cvue-simple-suggest v-model=\"model\" placeholder=\"Text here\" type=\"search\"\u003e\n\u003c/vue-simple-suggest\u003e\n```\n```html\n\u003c!--  Vanilla HTMLInputElement example 3 (fully equivalent to the second example):  --\u003e\n\u003cvue-simple-suggest v-model=\"model\"\u003e\n  \u003cinput placeholder=\"Text here\" type=\"search\"\u003e\n\u003c/vue-simple-suggest\u003e\n```\n```html\n\u003c!--  Vanilla HTMLInputElement example 4 (nested):  --\u003e\n\u003cvue-simple-suggest v-model=\"model\"\u003e\n  \u003cdiv\u003e\n    \u003csection\u003e\n      \u003cinput type=\"email\"\u003e\n    \u003c/section\u003e\n  \u003c/div\u003e\n\u003c/vue-simple-suggest\u003e\n```\n```html\n\u003c!--  Vue component example (also supports nesting):  --\u003e\n\u003cvue-simple-suggest v-model=\"vModelGoesHere\"\u003e\n  \u003cmy-custom-input-somponent :value=\"initialInputValueGoesHere\"\u003e\u003c/my-custom-input-somponent\u003e\n\u003c/vue-simple-suggest\u003e\n```\n\n**Custom input component caveats:**\n\nTo work with the `vue-simple-suggest` your custom input component has to follow certain standard behaviours.\n\nCustom input component **must** (in order to work properly):\n - Emit an `input` event.\n - Emit `focus` and `blur` events.\n - Have a `value` prop.\n\nCustom input component **should** (in order to avoid usage limitations):\n - Not stop any event propagations from internal input HTML element.\n - Forward an original event argument with `focus` and `blur` events.\n\nIf `vue-simple-suggest` with your custom component doesn't seem to react to outside variable changes - bind both components' v-model to the same variable, like so:\n```html\n\u003cvue-simple-suggest v-model=\"model\"\u003e\n  \u003cmy-custom-input-somponent v-model=\"model\"\u003e\u003c/my-custom-input-somponent\u003e\n\u003c/vue-simple-suggest\u003e\n```\n\n##### Accessibility on custom input\n\n\u003e New in [v1.9.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.9.0)\n\n`vue-simple-suggest` automatically injects 3 necessary ARIA attributes for the default `\u003cinput\u003e` element\nand any custom input, as long as your custom input component contains an html `\u003cinput\u003e` element.\n\nThese attributes ensure that the autocomplete can be used by users who rely on Screen Readers.\n\n| Name                  | Value                              | Description                            |\n|-----------------------|------------------------------------|----------------------------------------|\n| aria-autocomplete     | `\"list\"`                           | Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup. |\n| aria-controls         | IDREF of `suggestions` list        | IDREF of the popup element that lists suggested values. |\n| aria-activedescendant | IDREF of hovered option            | Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element. |\n\n\n##### Custom suggestion item\n\u003e `suggestion-item` slot (optional)\n\n**Description**\n\nAllows custom html-definitons of the suggestion items in a list.\nDefaults to `\u003cspan\u003e{{ displayAttribute(suggestion) }}\u003c/span\u003e`\n\nAccepts the `suggestion` object and a `query` text as a `slot-scope` attribute values.\n\n```html\n\u003c!-- Example (book suggestions): --\u003e\n\u003cvue-simple-suggest\u003e\n  \u003cdiv slot=\"suggestion-item\" slot-scope=\"{ suggestion, query }\"\u003e\n    \u003cdiv\u003e{{ suggestion.title }} by {{ suggestion.author }}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/vue-simple-suggest\u003e\n```\n\n**Custom buttons inside of suggestion items**\n\nIf you want to add some action buttons to the suggetion items,\njust use the `.stop` directive modifier to prevent the default `suggestion-click`:\n\n```html\n\u003c!-- Example (editable book suggestion): --\u003e\n\u003cvue-simple-suggest\u003e\n  \u003cdiv slot=\"suggestion-item\" slot-scope=\"{ suggestion, query }\"\u003e\n    \u003cspan\u003e{{ suggestion.title }} by {{ suggestion.author }}\u003c/span\u003e\n    \u003cbutton @click.stop=\"remove(suggestion)\"\u003eremove from list\u003c/button\u003e\n    \u003cbutton @click.stop=\"like(suggestion)\"\u003eadd to favorites\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/vue-simple-suggest\u003e\n```\n\nIn this case, the buttons will ONLY execute the bound method and will not select the suggested item.\n\n**Manual autocomplete**\n\nIf there's a need to autocomplete the suggestion in the input instead of selecting it (like in mobile suggestions of google search),\nyou can use the `autocomplete()` function in the slot's scope:\n\n```html\n\u003c!-- Example: --\u003e\n\u003cvue-simple-suggest\u003e\n  \u003cdiv slot=\"suggestion-item\" slot-scope=\"{ suggestion, autocomplete }\"\u003e\n    \u003cspan\u003e{{ suggestion.title }} by {{ suggestion.author }}\u003c/span\u003e\n    \u003cbutton @click.stop=\"autocomplete()\"\u003eComplete input\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/vue-simple-suggest\u003e\n```\n\nor in the [ref methods](#ref-methods):\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-simple-suggest ref=\"suggest\"\u003e\n    \u003cdiv slot=\"suggestion-item\" slot-scope=\"{ suggestion }\"\u003e\n      \u003cspan\u003e{{ suggestion.title }} by {{ suggestion.author }}\u003c/span\u003e\n      \u003cbutton @click.stop=\"onAutocompleteButtonClick(suggestion)\"\u003eComplete input\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/vue-simple-suggest\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  //...\n  methods: {\n    onAutocompleteButtonClick(suggestion) {\n      this.$refs.suggest.autocompleteText(suggestion);\n    }\n  }\n  //...\n}\n\u003c/script\u003e\n```\n\n\n**Ref Data**\n\nIn cooperation with [ref fields](#ref-methods) this slot can be used to drastically transform the suggestion list behaviour.\n\nOne of the simplest examples - highlighting the query text in the results:\n\n```html\n\u003cdiv slot=\"suggestion-item\" slot-scope=\"scope\"\u003e\n  \u003cspan v-html=\"boldenSuggestion(scope)\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\n```js\nboldenSuggestion(scope) {\n  if (!scope) return scope;\n\n  const { suggestion, query } = scope;\n\n  let result = this.$refs.suggestComponent.displayProperty(suggestion);\n\n  if (!query) return result;\n\n  const texts = query.split(/[\\s-_/\\\\|\\.]/gm).filter(t =\u003e !!t) || [''];\n  return result.replace(new RegExp('(.*?)(' + texts.join('|') + ')(.*?)','gi'), '$1\u003cb\u003e$2\u003c/b\u003e$3');\n}\n```\nResult via Google Books search API:\n\n![](assets/screenshot.jpg)\n\n##### Custom miscellaneous item slots\n\u003e `misc-item-above` and `misc-item-below` slots (optional)\n\nAllow custom elements to be shown in suggestion list. These elements never dissapear from the list, neither can they be selected nor hovered on.\n\nThey can be used for decoration, loaders, error messages and etc.\n\nThese slots don't have defaults, so they are not shown until defined.\n\nAccept the `suggestions` array and a `query` text as a `slot-scope` attribute values.\n\n```html\n\u003c!-- Examples: --\u003e\n\u003cvue-simple-suggest\u003e\n  \u003ctemplate slot=\"misc-item-above\" slot-scope=\"{ suggestions, query }\"\u003e\n    \u003cdiv class=\"misc-item\"\u003e\n      \u003cspan\u003eYou're searching for {{ query }}.\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"misc-item\"\u003e\n      \u003cspan\u003e{{ suggestions.length }} suggestions are shown...\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\n  \u003cdiv slot=\"misc-item-below\" slot-scope=\"{ suggestions }\" v-if=\"isLoading\" class=\"misc-item\"\u003e\n    \u003cspan\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/vue-simple-suggest\u003e\n```\n\nThese slots can also be used to handle empty results, like this:\n\n```html\n\u003c!-- Main slot template --\u003e\n\u003ctemplate slot=\"misc-item-above\" slot-scope=\"{ suggestions, query }\"\u003e\n  \u003cdiv class=\"misc-item\"\u003e\n    \u003cspan\u003eYou're searching for '{{ query }}'.\u003c/span\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Sub-template if have any suggestions --\u003e\n  \u003ctemplate v-if=\"suggestions.length \u003e 0\"\u003e\n    \u003cdiv class=\"misc-item\"\u003e\n      \u003cspan\u003e{{ suggestions.length }} suggestions are shown...\u003c/span\u003e\n    \u003c/div\u003e\n    \u003chr\u003e\n  \u003c/template\u003e\n\n  \u003c!-- Show \"No result\" otherwise, if not loading new ones --\u003e\n  \u003cdiv class=\"misc-item\" v-else-if=\"!loading\"\u003e\n    \u003cspan\u003eNo results\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n----\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Raiondesu\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19854420?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlexey\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#creator-Raiondesu\" title=\"Original creator\"\u003e😇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/kaskar2008\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/6456858?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKaren\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#creator-pokerface-kaskar2008\" title=\"Original creator\"\u003e😐\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://simeon.fyi\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/28311328?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSimeon Kerkola\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=sssmi\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=sssmi\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-sssmi\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/rcostalenz\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/4765136?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRoberson Costa\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=rcostalenz\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=rcostalenz\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-rcostalenz\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/rosdi\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/5094028?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRosdi Kasim\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=rosdi\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/antoinematyja\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/9961462?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eantoinematyja\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-antoinematyja\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.contoweb.ch/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/24254923?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMatthias Martin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Amatthiascw\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://robjbrain.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/10143910?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRob Brain\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Arobjbrain\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Arobjbrain\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/MrWook\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/20294042?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMrWook\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3AMrWook\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/nattam\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19463672?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003enattam\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-nattam\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/petyunchik\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/673497?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePetr\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Apetyunchik\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/RMFogarty\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/10094132?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRMFogarty\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-RMFogarty\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://brickgale.github.io\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/6366161?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBrian Monsales\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-brickgale\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.mila76.it\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/378500?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMila76\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Amila76\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Lofbergio\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1188259?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndriy Löfberg\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-Lofbergio\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"#ideas-Lofbergio\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=Lofbergio\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://buno.com.br\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/5221494?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBruno Monteiro\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-bunomonteiro\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/hannesaasamets\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/20644595?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ehannesaasamets\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Ahannesaasamets\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Geminii\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/9429420?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJimmy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3AGeminii\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.lastmileretail.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/10226784?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWill Plaehn\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=willplaehn\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-willplaehn\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=willplaehn\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/lauri911\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/12371449?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003elauri911\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Alauri911\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/alexhyriavets\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/19614509?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlex Hyriavets\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Aalexhyriavets\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/behnoodk\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/12370595?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBehnood Khani\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Abehnoodk\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.haykranen.nl\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/129681?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHay Kranen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=hay\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/shrpne\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/392907?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eshrpne\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Ashrpne\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=shrpne\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-shrpne\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/DragosPeta\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/10923419?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePeta Dragos-Andrei\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3ADragosPeta\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/shoito\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/37051?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eshoito\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=shoito\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/yamagen0915\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/2683573?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eyamagen0915\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/issues?q=author%3Ayamagen0915\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/KazanExpress/vue-simple-suggest/commits?author=yamagen0915\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazanexpress%2Fvue-simple-suggest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkazanexpress%2Fvue-simple-suggest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazanexpress%2Fvue-simple-suggest/lists"}