{"id":13535829,"url":"https://github.com/BosNaufal/vue2-autocomplete","last_synced_at":"2025-04-02T02:31:30.469Z","repository":{"id":57103421,"uuid":"77671894","full_name":"BosNaufal/vue2-autocomplete","owner":"BosNaufal","description":"Vue 2 Component to make Autocomplete element.","archived":false,"fork":false,"pushed_at":"2019-02-18T07:16:24.000Z","size":418,"stargazers_count":233,"open_issues_count":50,"forks_count":89,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-10-29T21:00:11.546Z","etag":null,"topics":["ajax","autocomplete","autocomplete-component","vue","vue-autocomplete"],"latest_commit_sha":null,"homepage":null,"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/BosNaufal.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":"2016-12-30T08:11:35.000Z","updated_at":"2024-08-02T02:20:42.000Z","dependencies_parsed_at":"2022-08-20T23:20:52.251Z","dependency_job_id":null,"html_url":"https://github.com/BosNaufal/vue2-autocomplete","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BosNaufal%2Fvue2-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BosNaufal%2Fvue2-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BosNaufal%2Fvue2-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BosNaufal%2Fvue2-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BosNaufal","download_url":"https://codeload.github.com/BosNaufal/vue2-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222791943,"owners_count":17038320,"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":["ajax","autocomplete","autocomplete-component","vue","vue-autocomplete"],"created_at":"2024-08-01T09:00:29.397Z","updated_at":"2024-11-03T00:31:31.752Z","avatar_url":"https://github.com/BosNaufal.png","language":"Vue","funding_links":[],"categories":["UI组件","Vue"],"sub_categories":[],"readme":"# Vue 2 Autocomplete\nAutocomplete Component For [Vue 2](http://vuejs.org). It's based on [vue-autocomplete](https://github.com/BosNaufal/vue-autocomplete). [LIVE DEMO HERE!](https://rawgit.com/BosNaufal/vue2-autocomplete/master/index.html)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"./\" title=\"Vue Autocomplete\"\u003e\n    \u003cimg src=\"./src/img/demo.gif\" alt=\"vue Autocomplete component\" title=\"Vue Autocomplete Component\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Install\nYou can import [vue2-autocomplete.vue](./src/js/components/vue-autocomplete.vue) to your vue component file like [this](./src/js/components/app.vue) and process it with your preprocessor.\n\nYou can install it via NPM\n```bash\nnpm install vue2-autocomplete-js\n```\n\nOr Just put it after Vue JS~\n```html\n\u003cscript src=\"https://vuejs.org/js/vue.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./dist/vue2-autocomplete.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // Don't Forget to register it\n  new Vue({\n    components: {\n      autocomplete: Vue2Autocomplete\n    }\n  });\n\u003c/script\u003e\n```\n\n## Import Style\nDon't forget to import vue 2 css. You can link it via html\n```html\n\u003clink rel=\"stylesheet\" href=\"vue2-autocomplete-js/dist/style/vue2-autocomplete.css\"\u003e\n```\n\nOr You can import it using commonJS\n\n```javascript\nrequire('vue2-autocomplete-js/dist/style/vue2-autocomplete.css')\n```\n\nIts style is very customizable. You can put any CSS over it. And You can add custom class via its prop.\n\n\n## Import Module\n```javascript\nimport Autocomplete from 'vue2-autocomplete-js'\n// Or\nvar Autocomplete = require('vue2-autocomplete-js');\n```\n\n## Usage\n```html\n\u003ctemplate\u003e\n\n  \u003cautocomplete\n    url=\"http://localhost/proyek/goodmovie/api/api/v1/search\"\n    anchor=\"title\"\n    label=\"writer\"\n    :on-select=\"getData\"\u003e\n  \u003c/autocomplete\u003e\n\n\u003c/template\u003e\n\n\n\u003cscript\u003e\n\n  import Autocomplete from 'vue2-autocomplete-js';\n\n  export default {\n\n    components: { Autocomplete },\n\n    methods: {\n      getData(obj){\n        console.log(obj);\n      }\n    }\n  };\n\n\u003c/script\u003e\n```\n\nAvailable Props\n```html\n\u003ctemplate\u003e\n\n  \u003cautocomplete\n    url=\"http://localhost/proyek/goodmovie/api/api/v1/search\"\n    anchor=\"title\"\n    label=\"writer\"\n    :onSelect=\"getData\"\n    :customParams=\"{ token: 'dev' }\"\n    :customHeaders=\"{ Authorization: 'bearer abc123' }\"\n\n\n    :required=\"true\"\n    id=\"custom id\"\n    className=\"custom class name\"\n    :classes=\"{ wrapper: 'form-wrapper', input: 'form-control', list: 'data-list', item: 'data-list-item' }\"\n    placeholder=\"placeholder\"\n    :initValue=\"initial value\"\n\n\n    :options=\"[]\"\n    :min=\"3\"\n    :debounce=\"2000\"\n    :filterByAnchor=\"true\"\n    :encodeParams=\"true\"\n\n    :onShouldGetData=\"getData\"\n    :onInput=\"callbackEvent\"\n    :onShow=\"callbackEvent\"\n    :onBlur=\"callbackEvent\"\n    :onHide=\"callbackEvent\"\n    :onFocus=\"callbackEvent\"\n    :onSelect=\"callbackEvent\"\n    :onBeforeAjax=\"callbackEvent\"\n    :onAjaxProgress=\"callbackEvent\"\n    :onAjaxLoaded=\"callbackEvent\"\n    :onShouldRenderChild=\"renderChild\"\n  \u003e\n  \u003c/autocomplete\u003e\n\n\u003c/template\u003e\n```\n\n## Props\n#### url* (String)\nthe URL must be active (not from file). the component will fetch JSON from this URL and passing one params (default : `q`) query. like:\n```\nhttp://some-url.com/API/list?q=\n```\nThere are no filter and limit action inside the component. So, do it in your API logic.\n\n#### param (String: \"q\")\nname of the search parameter to query in Ajax call. default is `q`\n\n#### min (Number: 0)\nMinimum input typed chars before performing the search query. default is `0`\n\n#### anchor* (String)\nIt's a object property path that used for Anchor in suggestions list. Example `anchor=\"name\"` will get the name property of your JSON object. Like (\"Bambang\", \"Sukijan\", \"Bejo\") in the demo above. Or you can reach the deep value of your object. Like `anchor=\"geometry.location.lat\"`\n\n\n#### label (String)\nSame as anchor but it's used for subtitle or description of list\n\n#### options (Array)\nManual pass an Array of list options to the autocomplete.\n\n#### filterByAnchor (Boolean: true)\nWhen you're using options props, you can have autocomplete to filter your data. Or you can just show your data directly without any filter from autocomplete. The options will be filtered by anchor and it according to the user input.\n\n#### encodeParams (Boolean: true)\nAutocomplete will ```encodeURIComponent``` all your params before ajax send, When this props sets to ```true```. Default is ```true``` [#35](https://github.com/BosNaufal/vue2-autocomplete/pull/35)\n\n#### debounce (Number)\nDelay time before do the ajax for the data\n\n\n#### required (Boolean)\nRequired attribute for input\n\n#### placeholder (String)\nPlaceholder for input\n\n#### className (String)\nCustom class name for autocomplete component\n\n#### classes (Object)\nSpesific custom class for each part. available: wrapper, input, list, and item\n\n#### id (String)\nCustom id name for autocomplete component\n\n#### debounce (number)\nNumber of milliseconds the user should stop typing for before the request is sent. Default is 0, meaning all requests are sent immediately.\n\n#### process (Function)\nFunction to process the API result with. Should return an array of entries or an object whose properties can be enumerated.\n\n#### template (Function)\nFunction to process each result with. Takes the type of an API reply element and should return HTML data.\n\n\n## Callback Events\nYou can make a callback event via props.\n\n#### onInput (Function)\nOn Input event in autocomplete\n\n#### onShow (Function)\nOn Show event in autocomplete list\n\n#### onBlur (Function)\nWhen autocomplete is blured\n\n#### onHide (Function)\nWhen autocomplete list is hidden\n\n#### onFocus (Function)\nWhen autocomplete input in focus mode\n\n#### onSelect (Function)\nWhen user has selected one item in the list\n\n#### onBeforeAjax (Function)\nBefore the ajax send\n\n#### onAjaxProgress (Function)\nWhile ajax is fetching the data\n\n#### onAjaxLoaded (Function)\nWhen ajax process is totally loaded\n\n#### onShouldGetData (Function)\nManually Process the whole ajax process. If it's a Promise, it should resolve the options for the list of autocomplete. If it isn't a Promise, you can manually pass the options to the props of autocomplete\n```html\n\u003cautocomplete\n  anchor=\"formatted_address\"\n  label=\"formatted_address\"\n  :onShouldGetData=\"getData\"\n\u003e\n\u003c/autocomplete\u003e\n```\n```javascript\nmethods: {\n  promise(value) {\n    return new Promise((resolve, reject) =\u003e {\n      let ajax = new XMLHttpRequest();\n      ajax.open('GET', `https://maps.googleapis.com/maps/api/geocode/json?address=${value}`, true);\n      // On Done\n      ajax.addEventListener('loadend', (e) =\u003e {\n        const { responseText } = e.target\n        let response = JSON.parse(responseText);\n        // The options to pass in the autocomplete\n        resolve(response.results)\n      });\n      ajax.send();\n    })\n  },\n\n  nonPromise() {\n    getData(value) {\n      let ajax = new XMLHttpRequest();\n      ajax.open('GET', `https://maps.googleapis.com/maps/api/geocode/json?address=${value}`, true);\n      // On Done\n      ajax.addEventListener('loadend', (e) =\u003e {\n        const { responseText } = e.target\n        let response = JSON.parse(responseText);\n        // The options to pass in the autocomplete props\n        this.options = response.results;\n      });\n      ajax.send();\n    },\n  }\n}\n```\n\n#### process (Function)\nProcess the result before retrieveng the result array. You can shape your data here before it's passed to the autocomplete\n\n#### onShouldRenderChild (Function)\nWanna use custom template for the list? Now, you can do it!\n```html\n\u003cautocomplete\n  anchor=\"formatted_address\"\n  label=\"formatted_address\"\n  :onShouldRenderChild=\"renderChild\"\n\u003e\n\u003c/autocomplete\u003e\n```\n```javascript\nmethods: {\n  renderChild(data) {\n    return `\n      \u003cimg src=\"${data.src}\" /\u003e\n      \u003cspan\u003e${data.something}\u003c/span\u003e\n    `\n  },\n}\n```\n\n\n\n## Methods\nYou can do some methods by accessing the component via javascript.\n```javascript\nthis.$refs.autocomplete.someMethod()\n```\n\n#### setValue (String)\nTo set the value of the autocomplete input\n\n\n\n## Thank You for Making this useful~\n\n## Let's talk about some projects with me\nJust Contact Me At:\n- Email: [bosnaufalemail@gmail.com](mailto:bosnaufalemail@gmail.com)\n- Skype Id: bosnaufal254\n- twitter: [@BosNaufal](https://twitter.com/BosNaufal)\n\n## License\n[MIT](http://opensource.org/licenses/MIT)\nCopyright (c) 2016 - forever Naufal Rabbani\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBosNaufal%2Fvue2-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBosNaufal%2Fvue2-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBosNaufal%2Fvue2-autocomplete/lists"}