{"id":13635374,"url":"https://github.com/darrenjennings/vue-autosuggest","last_synced_at":"2025-05-15T01:09:44.878Z","repository":{"id":26036156,"uuid":"107168226","full_name":"darrenjennings/vue-autosuggest","owner":"darrenjennings","description":"🔍 Vue autosuggest component.","archived":false,"fork":false,"pushed_at":"2023-01-10T15:38:42.000Z","size":4016,"stargazers_count":620,"open_issues_count":29,"forks_count":90,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-13T23:53:54.971Z","etag":null,"topics":["accessibility","autocomplete","autosuggest","javascript","typeahead","vue"],"latest_commit_sha":null,"homepage":"https://darrenjennings.github.io/vue-autosuggest","language":"JavaScript","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/darrenjennings.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["darrenjennings"]}},"created_at":"2017-10-16T18:38:18.000Z","updated_at":"2025-02-28T03:02:33.000Z","dependencies_parsed_at":"2023-01-14T09:30:58.853Z","dependency_job_id":null,"html_url":"https://github.com/darrenjennings/vue-autosuggest","commit_stats":null,"previous_names":["educents/vue-autosuggest"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrenjennings%2Fvue-autosuggest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrenjennings%2Fvue-autosuggest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrenjennings%2Fvue-autosuggest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrenjennings%2Fvue-autosuggest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darrenjennings","download_url":"https://codeload.github.com/darrenjennings/vue-autosuggest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254120525,"owners_count":22018011,"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","autocomplete","autosuggest","javascript","typeahead","vue"],"created_at":"2024-08-02T00:00:44.706Z","updated_at":"2025-05-15T01:09:39.870Z","avatar_url":"https://github.com/darrenjennings.png","language":"JavaScript","funding_links":["https://github.com/sponsors/darrenjennings"],"categories":["JavaScript","vue","UI Components","Components and plugins"],"sub_categories":["Form","Courses"],"readme":"\u003cdiv\u003e\n\u003cp align=\"center\"\u003e\u003cimg width=\"100\" src=\"docs/logo.png\" alt=\"Vue logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch1\u003evue-autosuggest\u003c/h1\u003e\n\n\u003cp\u003e🔍 Autosuggest component built for Vue.\u003c/a\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003chr /\u003e\n\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npmtrends]\n[![MIT License][license-badge]][LICENSE]\n[![gzip size][size-badge]](https://unpkg.com/vue-autosuggest@latest)\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors)\n[![PRs Welcome][prs-badge]][prs]\n[![Code of Conduct][coc-badge]][coc]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\n## Table of Contents\n\n* [Examples](#examples)\n* [Features](#features)\n* [Installation](#installation)\n* [Usage](#usage)\n* [Props](#props)\n* [Inspiration](#inspiration)\n* [Contributors](#contributors)\n* [LICENSE](#license)\n\n## Examples\n\n* \u003ca href=\"https://darrenjennings.github.io/vue-autosuggest\"\u003eDemo\u003c/a\u003e\n* \u003ca href=\"https://darrenjennings.github.io/vue-autosuggest/storybook\"\u003eStorybook\u003c/a\u003e Helpful to see all\n  variations of component's props.\u003cbr/\u003e\n* \u003ca href=\"https://jsfiddle.net/darrenjennings/dugbvezs/\"\u003eJSFiddle\u003c/a\u003e Helpful for playing around\n  and sharing.\n* Codesandbox Demos:\n\n  * [Deeply nested data objects as suggestions](https://codesandbox.io/s/vueautosuggest-api-data-objects-0nudq)\n  * [Api Fetching suggestions with Multiple sections](https://codesandbox.io/s/vueautosuggest-api-fetching-57d4e)\n  * [Form Validation with VeeValidate](https://codesandbox.io/s/vueautosuggest-vee-validate-ve13m)\n  * [Multiple VueAutosuggest instances on same page](https://codesandbox.io/s/vueautosuggest-multiple-vue-autosuggests-545ee)\n* [Integration with Algolia](https://www.algolia.com/doc/guides/building-search-ui/resources/ui-and-ux-patterns/in-depth/autocomplete/vue/?language=vue#results-page-with-autocomplete) thanks to [@haroenv](https://github.com/haroenv)!\n\n## Features\n\n* WAI-ARIA complete autosuggest component built with the power of Vue.\n* Full control over rendering with built in defaults or custom components for rendering.\n* Easily integrate AJAX data fetching for list presentation.\n* Supports multiple sections.\n* No opinions on CSS, full control over styling.\n* Rigorously tested.\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's `dependencies`:\n\n```\nnpm install vue-autosuggest\n```\n\nor\n\n```\nyarn add vue-autosuggest\n```\n\n## Usage\n\nLoad VueAutosuggest into your vue app globally.\n\n```js\nimport VueAutosuggest from \"vue-autosuggest\";\nVue.use(VueAutosuggest);\n```\n\nor locally inside a component:\n\n```js\nimport { VueAutosuggest } from 'vue-autosuggest';\nexport default {\n  ...\n  components: {\n      VueAutosuggest\n  }\n  ...\n};\n```\n\nPlace the component into your app!\n\n```html\n\u003cvue-autosuggest\n    :suggestions=\"[{data:['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn']}]\"\n    :input-props=\"{id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}\"\n    @input=\"onInputChange\"\n    @selected=\"selectHandler\"\n    @click=\"clickHandler\"\n\u003e  \n  \u003ctemplate slot-scope=\"{suggestion}\"\u003e\n    \u003cspan class=\"my-suggestion-item\"\u003e{{suggestion.item}}\u003c/span\u003e\n  \u003c/template\u003e\n\u003c/vue-autosuggest\u003e\n\n```\n\nAdvanced usage:\n\n\u003cdetails\u003e\u003csummary\u003eClick to expand\u003c/summary\u003e\u003cp\u003e\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"demo\"\u003e\n    \u003cdiv v-if=\"selected\" style=\"padding-top:10px; width: 100%;\"\u003e\n      You have selected \u003ccode\u003e{{selected.name}}, the {{selected.race}}\u003c/code\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"autosuggest-container\"\u003e\n      \u003cvue-autosuggest\n        v-model=\"query\"\n        :suggestions=\"filteredOptions\"\n        @focus=\"focusMe\"\n        @click=\"clickHandler\"\n        @input=\"onInputChange\"\n        @selected=\"onSelected\"\n        :get-suggestion-value=\"getSuggestionValue\"\n        :input-props=\"{id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}\"\u003e\n        \u003cdiv slot-scope=\"{suggestion}\" style=\"display: flex; align-items: center;\"\u003e\n          \u003cimg :style=\"{ display: 'flex', width: '25px', height: '25px', borderRadius: '15px', marginRight: '10px'}\" :src=\"suggestion.item.avatar\" /\u003e\n          \u003cdiv style=\"{ display: 'flex', color: 'navyblue'}\"\u003e{{suggestion.item.name}}\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/vue-autosuggest\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueAutosuggest } from \"vue-autosuggest\";\n\nexport default {\n  components: {\n    VueAutosuggest\n  },\n  data() {\n    return {\n      query: \"\",\n      selected: \"\",\n      suggestions: [\n        {\n          data: [\n            { id: 1, name: \"Frodo\", race: \"Hobbit\", avatar: \"https://upload.wikimedia.org/wikipedia/en/thumb/4/4e/Elijah_Wood_as_Frodo_Baggins.png/220px-Elijah_Wood_as_Frodo_Baggins.png\" },\n            { id: 2, name: \"Samwise\", race: \"Hobbit\", avatar: \"https://upload.wikimedia.org/wikipedia/en/thumb/7/7b/Sean_Astin_as_Samwise_Gamgee.png/200px-Sean_Astin_as_Samwise_Gamgee.png\" },\n            { id: 3, name: \"Gandalf\", race: \"Maia\", avatar: \"https://upload.wikimedia.org/wikipedia/en/thumb/e/e9/Gandalf600ppx.jpg/220px-Gandalf600ppx.jpg\" },\n            { id: 4, name: \"Aragorn\", race: \"Human\", avatar: \"https://upload.wikimedia.org/wikipedia/en/thumb/3/35/Aragorn300ppx.png/150px-Aragorn300ppx.png\" }\n          ]\n        }\n      ]\n    };\n  },\n  computed: {\n    filteredOptions() {\n      return [\n        { \n          data: this.suggestions[0].data.filter(option =\u003e {\n            return option.name.toLowerCase().indexOf(this.query.toLowerCase()) \u003e -1;\n          })\n        }\n      ];\n    }\n  },\n  methods: {\n    clickHandler(item) {\n      // event fired when clicking on the input\n    },\n    onSelected(item) {\n      this.selected = item.item;\n    },\n    onInputChange(text) {\n      // event fired when the input changes\n      console.log(text)\n    },\n    /**\n     * This is what the \u003cinput/\u003e value is set to when you are selecting a suggestion.\n     */\n    getSuggestionValue(suggestion) {\n      return suggestion.item.name;\n    },\n    focusMe(e) {\n      console.log(e) // FocusEvent\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.demo { \n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\ninput {\n  width: 260px;\n  padding: 0.5rem;\n}\n\nul {\n  width: 100%;\n  color: rgba(30, 39, 46,1.0);\n  list-style: none;\n  margin: 0;\n  padding: 0.5rem 0 .5rem 0;\n}\nli {\n  margin: 0 0 0 0;\n  border-radius: 5px;\n  padding: 0.75rem 0 0.75rem 0.75rem;\n  display: flex;\n  align-items: center;\n}\nli:hover {\n  cursor: pointer;\n}\n\n.autosuggest-container {\n  display: flex;\n  justify-content: center;\n  width: 280px;\n}\n\n#autosuggest { width: 100%; display: block;}\n.autosuggest__results-item--highlighted {\n  background-color: rgba(51, 217, 178,0.2);\n}\n\u003c/style\u003e\n```\n\n\u003c/p\u003e\u003c/details\u003e\n\nFor more advanced usage, check out the examples below, and explore the\n\u003ca href=\"#props\"\u003eproperties\u003c/a\u003e you can use.\n\n## [Slots](#slots)\n\n### header/footer\nSlots for injecting content around the results/input. Useful for header/footer like slots or empty state.\n\n```html\n\u003cvue-autosuggest ...\u003e\n  \u003ctemplate slot=\"before-input\"\u003e content before the \u003cinput /\u003e goes here \u003c/template\u003e\n  \u003ctemplate slot=\"after-input\"\u003e content after the \u003cinput /\u003e goes here \u003c/template\u003e\n  \u003ctemplate slot=\"before-suggestions\"\u003e content before the \u003cul\u003e goes here \u003c/template\u003e\n  \u003ctemplate slot=\"before-section-\u003csection.name e.g. 'default'\u003e\"\u003e section header content for specific section goes here \u003c/template\u003e\n  \u003ctemplate slot=\"after-section-\u003csection.name e.g. 'default'\u003e\"\u003e footer content goes here for specific section. \u003c/template\u003e\n  \u003ctemplate slot=\"after-section\"\u003e Default footer content for all sections \u003c/template\u003e\n  \u003ctemplate slot=\"after-suggestions\"\u003e content after the \u003cul\u003e goes here \u003c/template\u003e\n\u003c/vue-autosuggest\u003e\n```\n\n### Adding labels\n\nIt is common in forms to add a label next to the `\u003cinput /\u003e` tag for semantic html / accessibility. You can use the \n`before-input` slot to accomplish this in conjunction with the `inputProps.id`:\n\n```html\n\u003cvue-autosuggest ...\u003e\n  \u003ctemplate slot=\"before-input\"\u003e\n    \u003clabel :for=\"inputProps.id\"\u003eSearch here:\u003c/label\u003e\n  \u003c/template\u003e\n  ...\n\u003c/vue-autosuggest\u003e\n```\n\n### suggestion item (i.e. default slot)\nUsed to style each suggestion inside the `\u003cli\u003e` tag. Using [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) \nyou have access to the `suggestion` item inside the `v-for` suggestions loop. This gives you the power of Vue templating, since \nvue-autosuggest does not have an opinion about how you render the items in your list.\n\n```vue\n\u003cvue-autosuggest\u003e\n  \u003ctemplate slot-scope=\"{suggestion}\"\u003e\n    \u003c!-- suggestion.name corresponds to which section the item is in --\u003e\n    \u003cdiv v-if=\"suggestion.name === 'blog'\"\u003e\n      \u003c!-- suggestion.item corresponds to the suggestion object --\u003e\n      \u003ca target=\"_blank\" :href=\"suggestion.item.url\"\u003e{{suggestion.item.value}}\u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv v-else\u003e{{suggestion.item}}\u003c/div\u003e\n  \u003c/template\u003e\n\u003c/vue-autosuggest\u003e\n```\n\n\u003e This slot will be overridden when the [`render-suggestion`](#renderSuggestion) prop is used.\n\n\n\n## [Props](#props)\n\n| Prop                                        | Type     | Required | Description                                               |\n| :------------------------------------------ | :------- | :------: | :-------------------------------------------------------- |\n| [`suggestions`](#suggestionsProp)           | Array    |    ✓     | Array of sections, each containing suggestions to be rendered. e.g.`suggestions: [{data: ['harry','ron','hermione']}]`                               |\n| [`input-props`](#inputPropsTable)            | Object   |    ✓     | Add props to the `\u003cinput\u003e`.                               |\n| [`section-configs`](#sectionConfigsProp)     | Object   |          | Define multiple sections `\u003cinput\u003e`.                       |\n| [`render-suggestion`](#renderSuggestion)     | Function |          | Tell vue-autosuggest how to render inside the `\u003cli\u003e` tag. Overrides what is inside the default suggestion template slot. |\n| [`get-suggestion-value`](#getSuggestionValue) | Function |          | Tells vue-autosuggest what to put in the `\u003cinput/\u003e` value |\n| [`should-render-suggestions`](#shouldRenderSuggestions) | Function |          | Tell vue-autosuggest if it should render the suggestions results popover |\n| `component-attr-id-autosuggest` | String |          | `id` of entire component |\n| `component-attr-class-autosuggest-results-container` | String |          | `class` of container of results container |\n| `component-attr-class-autosuggest-results` | String |          | `class` of results container |\n| `component-attr-prefix` | String |          | prefix to be used for results item classes/ids. default: `autosuggest` |\n\n\u003ca name=\"inputPropsTable\"\u003e\u003c/a\u003e\n\n### inputProps\n\n| Prop                     | Type                |  Required  | Description                                                                                                                                                                  |\n| :----------------------- | :------------------ | :--------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [`id`](#inputPropsTable) | String              |     ✓      | id attribute on `\u003cinput\u003e`.                                                                                                                                                   |\n| Any DOM Props            | \\*                  |            | You can add any props to `\u003cinput\u003e` as the component will `v-bind` inputProps. Similar to rest spread in JSX. See more details here: https://vuejs.org/v2/api/#v-bind. The `name` attribute is set to \"`q`\" by default.         |\n\n\u003ca name=\"sectionConfigsProp\"\u003e\u003c/a\u003e\n\n### sectionConfigs\n\nMultiple sections can be defined in the `sectionConfigs` prop which defines the control behavior for\neach section.\n\n| Prop         | Type     | Required | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |\n| :----------- | :------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `on-selected` | Function |    ✓     | Determine behavior for what should happen when a suggestion is selected. e.g. Submit a form, open a link, update a vue model, tweet at Ken Wheeler etc.                                                                                                                                                                                                                                                                                                                                                                     |\n| `limit`      | Number   |          | Limit each section by some value. Default: `Infinity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |\n\nBelow we have defined a `default` section and a `blog` section. The `blog` section has a component\n`type` of `url-section` which corresponds to which component the Autosuggest loads. When type is not\ndefined, Vue-autosuggest will use a built in `DefaultSection.vue` component.\n\n```js\nsectionConfigs: {\n    'default': {\n        limit: 6,\n        onSelected: function(item, originalInput) {\n            console.log(item, originalInput, `Selected \"${item.item}\"`);\n        }\n    },\n    'blog': {\n        limit: 3,\n        type: \"url-section\",\n        onSelected: function() {\n            console.log(\"url: \" + item.item.url);\n        }\n    }\n}\n```\n\n\u003ca name=\"renderSuggestion\"\u003e\u003c/a\u003e\n\n### renderSuggestion\n\nThis function can be used to tell vue-autosuggest how to render the html inside the `\u003cli\u003e` tag when you do not want to use the \ndefault template slot for suggestions but would rather have the power of javascript / jsx.\n\nIn its most basic form it just returns an object property:\n\n```js\nrenderSuggestion(suggestion) {\n    return suggestion.name;\n},\n```\n\nBut usually it returns a JSX fragment, which is transformed into a virtual node description with babel-plugin-transform-vue-jsx:\n\n```jsx\nrenderSuggestion(suggestion) {\n    return \u003cdiv style={{ color: \"red\" }}\u003e{suggestion.name}\u003c/div\u003e;\n},\n```\n\nIf you're not using babel-plugin-transform-vue-jsx, you can create the virtual node description yourself:\n\n```js\nrenderSuggestion(suggestion) {\n    return this.$createElement('div', { 'style': { color: 'red'} }, suggestion.name);\n},\n```\n\n\u003ca name=\"getSuggestionValue\"\u003e\u003c/a\u003e\n\n### getSuggestionValue\n\nThis function will tell vue-autosuggest what to put in the `\u003cinput/\u003e` as the value.\n\n```js\ngetSuggestionValue(suggestion) {\n    return suggestion.item.name;\n},\n```\n\n\u003ca name=\"shouldRenderSuggestion\"\u003e\u003c/a\u003e\n\n### shouldRenderSuggestions\n\nThis function will tell vue-autosuggest if it should display the suggestions popover\n\n```js\n/**\n * @param {Array} size - total results displayed\n * @param {Boolean} loading - value that indicates if vue-autosuggest _thinks_ that the \n *                            the popover should be open (e.g. if user hit escape, or\n *                            user clicked away)\n * @returns {Boolean}\n */\nshouldRenderSuggestions (size, loading) {\n  // This is the default behavior\n  return size \u003e= 0 \u0026\u0026 !loading\n}\n```\n\n## [Events](#events)\n\nBelow are the list of supported events. `@` is short-hand for \n[v-on](https://vuejs.org/v2/guide/events.html#Listening-to-Events).\n\n| Prop                              | Returns               | Description                                                                                                                                                                 |\n| :-------------------------------- | :-------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `@selected`                       | suggestionItem, index | suggestion select handler. equivalent to sectionConfigs `on-selected` but for all items                                                                                     |\n| `@input`, `@focus`, `@blur`, etc. | \\*                    | there is a transparent wrapper on the underlying `\u003cinput /\u003e` so vue-autosuggest will use any DOM event you pass it for listening. This is implemented using `v-on:\u003cevent\u003e`. |\n| `@opened`, `@closed`              | \\*                    | suggestions visibility handler, indicates when the suggestions are opened and closed. This is called alongside [shouldRenderSuggestions](#shouldRenderSuggestions).         |\n| `@item-changed`                   | suggestionItem, index | when keying through the results, this event signals which item is highlighted before being selected.                                                                        |\n\n## Browser support\n\nFor IE11 and below, some functionality may not work. For example, you will have to manually [polyfill](https://github.com/Financial-Times/polyfill-service/issues/177) `Node.prototype.contains`\n\n## Inspiration\n\n* Misha Moroshko's react-autosuggest component inspired the api + WAI-ARIA completeness\n  https://github.com/moroshko/react-autosuggest\n\n## Contributors\n\nThanks goes to these people ([emoji key][emojis]):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n| [\u003cimg src=\"https://avatars.githubusercontent.com/u/5770711?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDarren Jennings\u003c/b\u003e\u003c/sub\u003e](https://darrenjennings.github.io)\u003cbr /\u003e[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings \"Code\") [📖](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings \"Documentation\") [🚇](#infra-darrenjennings \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings \"Tests\") [🎨](#design-darrenjennings \"Design\") [💡](#example-darrenjennings \"Examples\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/411772?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEvgeniy Kulish\u003c/b\u003e\u003c/sub\u003e](https://github.com/ekulish)\u003cbr /\u003e[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=ekulish \"Code\") [🎨](#design-ekulish \"Design\") [💡](#example-ekulish \"Examples\") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=ekulish \"Tests\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/1824850?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eScott Smith\u003c/b\u003e\u003c/sub\u003e](https://github.com/scottadamsmith)\u003cbr /\u003e[🐛](https://github.com/darrenjennings/vue-autosuggest/issues?q=author%3Ascottadamsmith \"Bug reports\") [💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith \"Code\") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith \"Tests\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/864496?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFernando Machuca\u003c/b\u003e\u003c/sub\u003e](https://github.com/chuca)\u003cbr /\u003e[🎨](#design-chuca \"Design\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/12657810?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBerniML\u003c/b\u003e\u003c/sub\u003e](https://github.com/BerniML)\u003cbr /\u003e[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=BerniML \"Code\") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=BerniML \"Tests\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/8436510?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKristoffer Nordström\u003c/b\u003e\u003c/sub\u003e](https://github.com/42tte)\u003cbr /\u003e[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=42tte \"Code\") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=42tte \"Tests\") | [\u003cimg src=\"https://avatars.githubusercontent.com/u/8142?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDan Wilson\u003c/b\u003e\u003c/sub\u003e](https://www.danjwilson.co.uk)\u003cbr /\u003e[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=djw \"Code\") |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThanks to [@chuca](https://github.com/chuca) for the logo design.\n\nThis project follows the [all-contributors][all-contributors] specification. Contributions of any\nkind welcome!\n\n## LICENSE\n\nMIT\n\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[build-badge]: https://img.shields.io/travis/darrenjennings/vue-autosuggest.svg?style=flat-square\n[build]: https://travis-ci.org/darrenjennings/vue-autosuggest\n[size-badge]: https://img.badgesize.io/https://unpkg.com/vue-autosuggest@latest/dist/vue-autosuggest.esm.js?compression=gzip\u0026style=flat-square\n[coverage-badge]: https://img.shields.io/codecov/c/github/darrenjennings/vue-autosuggest.svg?style=flat-square\n[coverage]: https://codecov.io/github/darrenjennings/vue-autosuggest\n[version-badge]: https://img.shields.io/npm/v/vue-autosuggest.svg?style=flat-square\n[package]: https://www.npmjs.com/package/vue-autosuggest\n[downloads-badge]: https://img.shields.io/npm/dm/vue-autosuggest.svg?style=flat-square\n[npmtrends]: http://www.npmtrends.com/vue-autosuggest\n[license-badge]: https://img.shields.io/npm/l/vue-autosuggest.svg?style=flat-square\n[license]: https://github.com/darrenjennings/vue-autosuggest/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/darrenjennings/vue-autosuggest/blob/master/other/CODE_OF_CONDUCT.md\n[github-watch-badge]: https://img.shields.io/github/watchers/darrenjennings/vue-autosuggest.svg?style=social\n[github-watch]: https://github.com/darrenjennings/vue-autosuggest/watchers\n[github-star-badge]: https://img.shields.io/github/stars/darrenjennings/vue-autosuggest.svg?style=social\n[github-star]: https://github.com/darrenjennings/vue-autosuggest/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20vue-autosuggest%20by%20%40darrenjennings%20https%3A%2F%2Fgithub.com%2Fdarrenjennings%2Fvue-autosuggest%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/darrenjennings/vue-autosuggest.svg?style=social\n[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key\n[all-contributors]: https://github.com/kentcdodds/all-contributors\n\n\u003c!-- [donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarrenjennings%2Fvue-autosuggest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarrenjennings%2Fvue-autosuggest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarrenjennings%2Fvue-autosuggest/lists"}