{"id":13394446,"url":"https://github.com/LeaVerou/awesomplete","last_synced_at":"2025-03-13T20:31:30.748Z","repository":{"id":27507257,"uuid":"30987756","full_name":"LeaVerou/awesomplete","owner":"LeaVerou","description":"Ultra lightweight, usable, beautiful autocomplete with zero dependencies.","archived":false,"fork":false,"pushed_at":"2024-07-25T19:20:01.000Z","size":323,"stargazers_count":6970,"open_issues_count":186,"forks_count":612,"subscribers_count":134,"default_branch":"gh-pages","last_synced_at":"2024-10-29T21:10:26.869Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://leaverou.github.io/awesomplete/","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/LeaVerou.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-02-18T21:24:14.000Z","updated_at":"2024-10-29T18:49:57.000Z","dependencies_parsed_at":"2024-11-18T10:09:02.486Z","dependency_job_id":"30aebdb0-73d7-41de-919d-afb8a0d20d3d","html_url":"https://github.com/LeaVerou/awesomplete","commit_stats":{"total_commits":229,"total_committers":66,"mean_commits":"3.4696969696969697","dds":0.5807860262008734,"last_synced_commit":"7bafd6bbe4d09d994ebdd628dd7568ed339eb4f8"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeaVerou%2Fawesomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeaVerou%2Fawesomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeaVerou%2Fawesomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeaVerou%2Fawesomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LeaVerou","download_url":"https://codeload.github.com/LeaVerou/awesomplete/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243478113,"owners_count":20297194,"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-07-30T17:01:19.995Z","updated_at":"2025-03-13T20:31:30.718Z","avatar_url":"https://github.com/LeaVerou.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Form Widgets","Form Widgets [🔝](#readme)","Uncategorized","Web 前端","表单组件"],"sub_categories":["Input","Uncategorized","输入"],"readme":"# Awesomplete\r\n[![npm version](https://img.shields.io/npm/v/awesomplete.svg)](https://www.npmjs.com/package/awesomplete)\r\n[![Build Status](https://img.shields.io/travis/LeaVerou/awesomplete/gh-pages.svg)](https://travis-ci.org/LeaVerou/awesomplete)\r\n[![Code Climate](https://img.shields.io/codeclimate/github/LeaVerou/awesomplete.svg)](https://codeclimate.com/github/LeaVerou/awesomplete)\r\n[![Test Coverage](https://img.shields.io/codeclimate/coverage/github/LeaVerou/awesomplete.svg)](https://codeclimate.com/github/LeaVerou/awesomplete/coverage)\r\n\r\nhttps://leaverou.github.io/awesomplete/\r\n\r\nAwesomplete is an ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers.\r\n\r\n## Installation\r\nThere are a few ways to obtain the needed files.\r\nHere are 2 of them:\r\n1. CDN server\r\n\r\n```sh\r\nhttps://cdnjs.com/libraries/awesomplete\r\n```\r\n\r\n2. Another way to get up and running is by using `yarn` or `npm`:\r\n\r\n```sh\r\nyarn add awesomplete\r\n```\r\n\r\n```sh\r\nnpm install awesomplete --save\r\n```\r\n\r\nMore information about the npm package can be found [here](https://www.npmjs.com/package/awesomplete).\r\n\r\n## Basic Usage\r\n\r\nBefore you try anything, you need to include awesomplete.css and awesomplete.js in your page, via the usual tags:\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"awesomplete.css\" /\u003e\r\n\u003cscript src=\"awesomplete.js\" async\u003e\u003c/script\u003e\r\n```\r\n\r\nThen you can add an Awesomplete widget by adding the following input tag:\r\n\r\n```html\r\n\u003cinput class=\"awesomplete\"\r\n       data-list=\"Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails\" /\u003e\r\n```\r\n\r\nAdd `class=\"awesomplete\"` for it to be automatically processed (you can still specify many options via HTML attributes)\r\nOtherwise you can instantiate with a few lines of JS code, which allow for more customization.\r\n\r\nThere are many ways to link an input to a list of suggestions. \r\nThe simple example above could have also been made with the following markup, which provides a nice native fallback in case the script doesn’t load:\r\n\r\n```html\r\n\u003cinput class=\"awesomplete\" list=\"mylist\" /\u003e\r\n\u003cdatalist id=\"mylist\"\u003e\r\n\t\u003coption\u003eAda\u003c/option\u003e\r\n\t\u003coption\u003eJava\u003c/option\u003e\r\n\t\u003coption\u003eJavaScript\u003c/option\u003e\r\n\t\u003coption\u003eBrainfuck\u003c/option\u003e\r\n\t\u003coption\u003eLOLCODE\u003c/option\u003e\r\n\t\u003coption\u003eNode.js\u003c/option\u003e\r\n\t\u003coption\u003eRuby on Rails\u003c/option\u003e\r\n\u003c/datalist\u003e\r\n```\r\n\r\nOr the following, if you don’t want to use a `\u003cdatalist\u003e`, or if you don’t want to use IDs (since any selector will work in data-list):\r\n\r\n```html\r\n\u003cinput class=\"awesomplete\" data-list=\"#mylist\" /\u003e\r\n\u003cul id=\"mylist\"\u003e\r\n\t\u003cli\u003eAda\u003c/li\u003e\r\n\t\u003cli\u003eJava\u003c/li\u003e\r\n\t\u003cli\u003eJavaScript\u003c/li\u003e\r\n\t\u003cli\u003eBrainfuck\u003c/li\u003e\r\n\t\u003cli\u003eLOLCODE\u003c/li\u003e\r\n\t\u003cli\u003eNode.js\u003c/li\u003e\r\n\t\u003cli\u003eRuby on Rails\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\nThere are multiple customizations and properties able to be instantiated within the JS. Libraries and definitions of the properties are available in the Links below.\r\n\r\n## Options\r\n\r\n| JS Property | HTML Attribute | Description                                                                     | Value   | Default      |\r\n| ----------- | -------------- | ------------------------------------------------------------------------------- | ------- | ------------ |\r\n| `list`      | `data-list`      | Where to find the list of suggestions.                                          | Array of strings, HTML element, CSS selector (no groups, i.e. no commas), String containing a comma-separated list of items | N/A |\r\n| `minChars`  | `data-minchars`  | Minimum characters the user has to type before the autocomplete popup shows up. | Number  | `2`           |\r\n| `maxItems`  | `data-maxitems`  | Maximum number of suggestions to display.                                       | Number  | `10`          |\r\n| `autoFirst` | `data-autofirst` | Should the first element be automatically                                       | Boolean | `false`       |\r\n| `listLabel` | `data-listlabel` | Denotes a label to be used as aria-label on the generated autocomplete list.    | String  | Results List |\r\n\r\n## License\r\n\r\nAwesomplete is released under the MIT License. See [LICENSE][1] file for\r\ndetails.\r\n\r\n## Links\r\n\r\nThe official site for the library is at \u003chttps://leaverou.github.io/awesomplete/\u003e.\r\n\r\nDocumentation for the API and other topics is at\r\n\u003chttps://leaverou.github.io/awesomplete/#api\u003e.\r\n\r\nCreated by Lea Verou and other fantastic contributors.\r\n\r\n[1]: https://github.com/LeaVerou/awesomplete/blob/gh-pages/LICENSE\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLeaVerou%2Fawesomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLeaVerou%2Fawesomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLeaVerou%2Fawesomplete/lists"}