{"id":13424006,"url":"https://pespantelis.github.io/vue-typeahead/","last_synced_at":"2025-03-15T17:32:44.842Z","repository":{"id":44718687,"uuid":"41257953","full_name":"pespantelis/vue-typeahead","owner":"pespantelis","description":":mag: Typeahead component for Vue.js","archived":false,"fork":false,"pushed_at":"2018-11-18T19:53:59.000Z","size":825,"stargazers_count":516,"open_issues_count":24,"forks_count":97,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-07T06:03:02.782Z","etag":null,"topics":["javascript","typeahead","vue"],"latest_commit_sha":null,"homepage":"http://pespantelis.github.io/vue-typeahead","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/pespantelis.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}},"created_at":"2015-08-23T16:42:09.000Z","updated_at":"2025-03-06T22:53:42.000Z","dependencies_parsed_at":"2022-07-20T15:02:17.128Z","dependency_job_id":null,"html_url":"https://github.com/pespantelis/vue-typeahead","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pespantelis%2Fvue-typeahead","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pespantelis%2Fvue-typeahead/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pespantelis%2Fvue-typeahead/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pespantelis%2Fvue-typeahead/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pespantelis","download_url":"https://codeload.github.com/pespantelis/vue-typeahead/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243534538,"owners_count":20306536,"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":["javascript","typeahead","vue"],"created_at":"2024-07-31T00:00:46.577Z","updated_at":"2025-03-15T17:32:44.427Z","avatar_url":"https://github.com/pespantelis.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# VueTypeahead\n\nSee a live demo [here](http://pespantelis.github.io/vue-typeahead/).\n\n## Install\n\n#### NPM\nAvailable through npm as `vue-typeahead`.\n```\nnpm install --save vue-typeahead\n```\n\u003e Also, you need to install a HTTP client like [`axios`](https://github.com/mzabriskie/axios).\n\n## Usage\nIf you are using `vue@1.0.22+`, you could use the new [`extends`](http://vuejs.org/api/#extends) property (see below).\n\nOtherwise, the `mixins` way also works.\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003c!-- optional indicators --\u003e\n    \u003ci class=\"fa fa-spinner fa-spin\" v-if=\"loading\"\u003e\u003c/i\u003e\n    \u003ctemplate v-else\u003e\n      \u003ci class=\"fa fa-search\" v-show=\"isEmpty\"\u003e\u003c/i\u003e\n      \u003ci class=\"fa fa-times\" v-show=\"isDirty\" @click=\"reset\"\u003e\u003c/i\u003e\n    \u003c/template\u003e\n\n    \u003c!-- the input field --\u003e\n    \u003cinput type=\"text\"\n           placeholder=\"...\"\n           autocomplete=\"off\"\n           v-model=\"query\"\n           @keydown.down=\"down\"\n           @keydown.up=\"up\"\n           @keydown.enter=\"hit\"\n           @keydown.esc=\"reset\"\n           @blur=\"reset\"\n           @input=\"update\"/\u003e\n\n    \u003c!-- the list --\u003e\n    \u003cul v-show=\"hasItems\"\u003e\n      \u003c!-- for vue@1.0 use: ($item, item) --\u003e\n      \u003cli v-for=\"(item, $item) in items\" :class=\"activeClass($item)\" @mousedown=\"hit\" @mousemove=\"setActive($item)\"\u003e\n        \u003cspan v-text=\"item.name\"\u003e\u003c/span\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueTypeahead from 'vue-typeahead'\n\nexport default {\n  extends: VueTypeahead, // vue@1.0.22+\n  // mixins: [VueTypeahead], // vue@1.0.21-\n\n  data () {\n    return {\n      // The source url\n      // (required)\n      src: '...',\n\n      // The data that would be sent by request\n      // (optional)\n      data: {},\n\n      // Limit the number of items which is shown at the list\n      // (optional)\n      limit: 5,\n\n      // The minimum character length needed before triggering\n      // (optional)\n      minChars: 3,\n\n      // Highlight the first item in the list\n      // (optional)\n      selectFirst: false,\n\n      // Override the default value (`q`) of query parameter name\n      // Use a falsy value for RESTful query\n      // (optional)\n      queryParamName: 'search'\n    }\n  },\n\n  methods: {\n    // The callback function which is triggered when the user hits on an item\n    // (required)\n    onHit (item) {\n      // alert(item)\n    },\n\n    // The callback function which is triggered when the response data are received\n    // (optional)\n    prepareResponseData (data) {\n      // data = ...\n      return data\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  li.active {\n    /* ... */\n  }\n\u003c/style\u003e\n```\n\n## Key Actions\n**Down Arrow:** Highlight the previous item.\n\n**Up Arrow:** Highlight the next item.\n\n**Enter:** Hit on highlighted item.\n\n**Escape:** Hide the list.\n\n## States\n**loading:** Indicates that awaits the data.\n\n**isEmpty:** Indicates that the input is empty.\n\n**isDirty:** Indicates that the input is not empty.\n\u003e Useful if you want to add icon indicators (see the demo)\n\n## License\nVueTypeahead is released under the MIT License. See the bundled LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/pespantelis.github.io%2Fvue-typeahead%2F","html_url":"https://awesome.ecosyste.ms/projects/pespantelis.github.io%2Fvue-typeahead%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/pespantelis.github.io%2Fvue-typeahead%2F/lists"}