{"id":13810095,"url":"https://github.com/charliekassel/vuejs-autocomplete","last_synced_at":"2025-04-05T07:08:03.827Z","repository":{"id":22160065,"uuid":"95458843","full_name":"charliekassel/vuejs-autocomplete","owner":"charliekassel","description":"Autocomplete component for Vue js","archived":false,"fork":false,"pushed_at":"2022-03-24T15:11:46.000Z","size":204,"stargazers_count":135,"open_issues_count":39,"forks_count":78,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-09T18:31:46.338Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/charliekassel.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-06-26T15:02:21.000Z","updated_at":"2024-09-03T03:39:32.000Z","dependencies_parsed_at":"2022-07-22T12:32:45.177Z","dependency_job_id":null,"html_url":"https://github.com/charliekassel/vuejs-autocomplete","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliekassel%2Fvuejs-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliekassel%2Fvuejs-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliekassel%2Fvuejs-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliekassel%2Fvuejs-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charliekassel","download_url":"https://codeload.github.com/charliekassel/vuejs-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299833,"owners_count":20916190,"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":[],"created_at":"2024-08-04T02:00:45.412Z","updated_at":"2025-04-05T07:08:03.805Z","avatar_url":"https://github.com/charliekassel.png","language":"JavaScript","funding_links":[],"categories":["UI Components [🔝](#readme)","JavaScript","UI组件","Components \u0026 Libraries","UI Components"],"sub_categories":["形成","UI Components","Form"],"readme":"# vuejs-auto-complete\n\n[![Travis Build](https://img.shields.io/travis/charliekassel/vuejs-autocomplete.svg?branch=master)](https://travis-ci.org/charliekassel/vuejs-autocomplete?branch=master)\n[![Version](https://img.shields.io/npm/v/vuejs-auto-complete.svg)](https://www.npmjs.com/package/vuejs-auto-complete)\n[![Coveralls github](https://img.shields.io/coveralls/github/charliekassel/vuejs-autocomplete.svg)](https://coveralls.io/github/charliekassel/vuejs-autocomplete?branch=master)\n[![Downloads](https://img.shields.io/npm/dm/vuejs-auto-complete.svg)](https://www.npmjs.com/package/vuejs-auto-complete)\n\n\u003e A Vue autocomplete component\n\n`npm install vuejs-auto-complete --save`\n\n## Usage\n\nInstallation, add autocomplete component into your app\n\n```javascript\nimport Vue from 'vue'\nimport Autocomplete from 'vuejs-auto-complete'\n\nnew Vue({\n  //...\n  components: {\n    Autocomplete,\n  },\n  //...\n})\n```\n\nApi data source\n``` html\n\u003cautocomplete\n  source=\"https://api.github.com/search/repositories?q=\"\n  results-property=\"items\"\n  results-display=\"full_name\"\u003e\n\u003c/autocomplete\u003e\n```\n\nObject data source\n``` html\n\u003cautocomplete\n  :source=\"[{id:1,name:'abc'},{id:2,name:'def'}]\"\u003e\n\u003c/autocomplete\u003e\n```\n\nFull featured example\n``` html\n\u003cautocomplete\n  ref=\"autocomplete\"\n  placeholder=\"Search Distribution Groups\"\n  :source=\"distributionGroupsEndpoint\"\n  input-class=\"form-control\"\n  results-property=\"data\"\n  :results-display=\"formattedDisplay\"\n  :request-headers=\"authHeaders\"\n  @selected=\"addDistributionGroup\"\u003e\n\u003c/autocomplete\u003e\n```\n``` javascript\n// parent component\ncomputed: {\n  authHeaders () {\n    return {\n      'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'\n    }\n  },\n},\nmethods: {\n  distributionGroupsEndpoint (input) {\n    return process.env.API + '/distribution/search?query=' + input\n  },\n  addDistributionGroup (group) {\n    this.group = group\n    // access the autocomplete component methods from the parent\n    this.$refs.autocomplete.clear()\n  },\n  authHeaders () {\n    return {\n      'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'\n    }\n  },\n  formattedDisplay (result) {\n    return result.name + ' [' + result.groupId + ']'\n  }\n}\n```\n## Available props\n\n| Prop                  | Type                        | Required | Default   | Description |\n|-----------------------|-----------------------------|----------|-----------|-------------|\n| source                | String\\|Function\\|Object\\|Array |          | true      | data source for the results|\n| method                | String                      |          | 'get'     | http method for api requests|\n| placeholder           | String                      |          | 'Search'  | input placeholder|\n| initialValue          | String\\|Number              |          |           | starting value|\n| initialDisplay        | String                      |          |           | starting display value|\n| inputClass            | String\\|Object              |          |           | css class for the input div|\n| disableInput          | Boolean                     |          |           | to disable the input|\n| name                  | String                      |          |           | name attribute for the `value` input|\n| resultsFormatter      | Function\u003cObject[]\u003e          |          |           | Function to format the server data. Should return an array of objects with id and name properties |\n| resultsProperty       | String                      |          |           | property api results are keyed under|\n| resultsValue          | String                      |          | 'id'      | property to use for the `value`|\n| resultsDisplay        | String\\|Function            |          | 'name'    | property to use for the `display` or custom function|\n| requestHeaders        | Object                      |          |           | extra headers appended to the request|\n| showNoResults         | Boolean                     |          | true      | To show a message that no results were found|\n| clearButtonIcon       | String                      |          |           | Optionally provide an icon css class|\n| maxlength             | Number                      |          |           | Optional max input length|\n\n## Available events\n\n| Event    | Output         | Description |\n|----------|----------------|-------------|\n| results  | Object         | Results returned from a search |\n| noResults| Object         | When no results are returned |\n| selected | Object         | When an item is selected |\n| input    | String\\|Number | The value when an item is selected |\n| clear    |                | When selected results are cleared |\n| close    |                | When the options list is closed |\n| enter    | String         | Emits the input value when enter is pressed |\n| nothingSelected | String  | Emits the input value when enter is pressed and nothing was selected |\n\n## Available Slots\n\n| Slot        | Description |\n|-------------|-------------|\n| firstResult | list item placed before all results |\n| lastResult  | list item placed at the end of the results |\n| noResults   | list item shown when no results are present |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharliekassel%2Fvuejs-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharliekassel%2Fvuejs-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharliekassel%2Fvuejs-autocomplete/lists"}