{"id":17354134,"url":"https://github.com/mizuka-wu/vue2-typeahead","last_synced_at":"2025-04-14T12:52:57.392Z","repository":{"id":20337720,"uuid":"89580399","full_name":"mizuka-wu/vue2-typeahead","owner":"mizuka-wu","description":"A vue component of typeahead","archived":false,"fork":false,"pushed_at":"2023-01-04T21:40:14.000Z","size":3763,"stargazers_count":31,"open_issues_count":27,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T21:48:53.998Z","etag":null,"topics":["javascript","typeahead","vue","vue2"],"latest_commit_sha":null,"homepage":"https://www.mizuka.top/vue2-typeahead/","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/mizuka-wu.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":"2017-04-27T09:27:48.000Z","updated_at":"2024-01-17T20:46:55.000Z","dependencies_parsed_at":"2023-01-13T20:55:11.012Z","dependency_job_id":null,"html_url":"https://github.com/mizuka-wu/vue2-typeahead","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizuka-wu%2Fvue2-typeahead","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizuka-wu%2Fvue2-typeahead/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizuka-wu%2Fvue2-typeahead/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizuka-wu%2Fvue2-typeahead/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mizuka-wu","download_url":"https://codeload.github.com/mizuka-wu/vue2-typeahead/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248885348,"owners_count":21177623,"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","vue2"],"created_at":"2024-10-15T17:19:09.641Z","updated_at":"2025-04-14T12:52:57.354Z","avatar_url":"https://github.com/mizuka-wu.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue2-typeahead\n\n\u003e typeahead for vue2  \n\u003e Based on[https://github.com/pespantelis/vue-typeahead](https://github.com/pespantelis/vue-typeahead)\n\n![publish to npm](https://github.com/mizuka-wu/vue2-typeahead/workflows/publish%20to%20npm/badge.svg)\n![upload release asset](https://github.com/mizuka-wu/vue2-typeahead/workflows/upload%20release%20asset/badge.svg)\n\n## Quick preview\n\n![demo](https://github.com/mizuka-wu/vue2-typeahead/blob/master/src/assets/demo.gif?raw=true)\n[Demo](https://www.mizuka.top/vue2-typeahead/)\n\n## Run demo\n\n```bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n```\n\n## Warning\n\nPrepared rewrite by vue2.5 and bootstrap 4\n\n## How to use\n\n1. ~~Please install axios~~\n2. It base on bootstrap css\n3. `npm install vue2-typeahead --save`\n4. import and use it `import TypeAhead from 'vue2-typeahead'` or `import TypeAhead from 'vue2-typeahead/src/components/TypeAhead.vue'`\n5. config (you can get a config sample from Demo.vue)\n\n### Sample\n\n```\n \u003cTypeAhead\n      src=\"/static/data.json?keyword=:keyword\"\n      :getResponse=\"getResponse\"\n    \u003e\u003c/TypeAhead\u003e\n\n```\n\n```\nmethods: {\n      getResponse: function (response) {\n        return response.data.items\n      }\n    }\n```\n\n## Config props\n\n### v-model\n\nYou can get the result by set `v-model=\"\"` attribute\n\n### Necessary\n\n1. **src**: The api url for get the data\n2. **getResponse**: The function to get a array form response\n\n### Optional\n\n1. **selectFirst** default:_false_ auto select first item\n2. **queryParamName** default:_:keyword_ this will be replace to what you input in ajax request\n3. **limit** default:_9999_ how many items will show in the list\n4. **minChars** default:_2_ only words length large than this number can emit the request\n5. **delayTime** default:_500_ delay time for emit the request for avoiding request when inputing\n6. **placeholder** default:_null_ placeholder\n7. **classes** default:_null_ the class you want add to input component\n8. **onHit** default:_Function_ how to use the things you hit\n9. **highlighting** default:_Function_ highlighting every item\n10. **render** default:_Function_ to render the lists which will be show\n11. **fetch** default:_Function_ how to send the url\n\n### other\n\nother attribute will bind on `\u003cinput /\u003e` like disabled on v1.3.0\n\n### What you can get in instance\n\nSome function will return vue object, it is the instance of component and i use it to change the query, you can also get some useful data by it\n\n1. items: option list after render function\n2. current: current id is select or cursor is hover\n3. data: the response data of fetch\n\n## A Complete Config Sample\n\n```\n\u003cTypeAhead\n      v-model=\"data\"\n      :classes=\"classes\"\n      :placeholder=\"placeholder\"\n      src=\"/static/data.json?keyword=:keyword\"\n      :getResponse=\"getResponse\"\n      :selectFirst=\"selectFirst\"\n      :limit=\"parseInt(limit)\"\n      :queryParamName=\"queryParamName\"\n      :minChars=\"parseInt(minChars)\"\n      :delayTime=\"parseInt(delayTime)\"\n      :onHit=\"onHit\"\n      :highlighting=\"highlighting\"\n      :render=\"render\"\n      :fetch=\"fetch\"\n    \u003e\u003c/TypeAhead\u003e\n```\n\n```\n    data () {\n      return {\n        data: '',\n        selectFirst: false,\n        limit: 9999,\n        queryParamName: ':keyword',\n        minChars: 2,\n        delayTime: 500,\n        placeholder: 'Please input something',\n        classes: 'typeahead'\n      }\n    },\n    methods: {\n      getResponse: function (response) {\n        return response.data.data.items\n      },\n      onHit: function (item, vue, index) {\n        vue.query = item\n      },\n      highlighting: function (item, vue) {\n        return item.toString().replace(vue.query, `\u003cb\u003e${vue.query}\u003c/b\u003e`)\n      },\n      render: function (items, vue) {\n        // 将搜索内容作为list的第一个\n        let newItem = [vue.query, ...items]\n        return newItem\n      },\n      fetch: function (url) {\n        return axios.get(url)\n      }\n    },\n    components: {\n      TypeAhead\n    }\n```\n\n# License\n\nvue2-typeahead is released under the MIT License. See the bundled LICENSE file for details.\n\n# donate\n\n![donate](https://github.com/mizuka-wu/mizuka-wu.github.io/blob/master/assets/donate.jpg?raw=true)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizuka-wu%2Fvue2-typeahead","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmizuka-wu%2Fvue2-typeahead","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizuka-wu%2Fvue2-typeahead/lists"}