{"id":24383301,"url":"https://github.com/firstandthird/tokens","last_synced_at":"2025-04-11T01:12:23.748Z","repository":{"id":10173631,"uuid":"12258244","full_name":"firstandthird/tokens","owner":"firstandthird","description":"jQuery plugin to turn a text field into a tokenized autocomplete","archived":false,"fork":false,"pushed_at":"2022-12-06T18:41:06.000Z","size":987,"stargazers_count":2,"open_issues_count":21,"forks_count":3,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-11T01:12:19.061Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/firstandthird.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2013-08-21T01:20:04.000Z","updated_at":"2019-07-03T10:03:02.000Z","dependencies_parsed_at":"2022-08-31T03:12:00.310Z","dependency_job_id":null,"html_url":"https://github.com/firstandthird/tokens","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Ftokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Ftokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Ftokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Ftokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firstandthird","download_url":"https://codeload.github.com/firstandthird/tokens/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322571,"owners_count":21084337,"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":"2025-01-19T10:14:11.008Z","updated_at":"2025-04-11T01:12:23.736Z","avatar_url":"https://github.com/firstandthird.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tokens\n\n![npm](https://img.shields.io/npm/v/@firstandthird/tokens.svg)\n\nPlugin that turns a text field into a tokenized autocomplete.\n\n## Installation\n\n```sh\nnpm install @firstandthird/tokens\n```\n\n## Usage\n\n### JavaScript\n\n```js\nimport '@firstandthird/tokens'\n```\n\n### HTML\n\n```html\n  ...\n\n  \u003cbody\u003e\n    \u003cdiv data-module=\"Tokens\" data-module-endpoint=\"tokens.json?q=${term}\" data-module-strict=\"false\" data-action=\"focus\" data-module-initial=\"One, Two\"\u003e\n      \u003cdiv data-name=\"tokensContainer\"\u003e\u003c/div\u003e\n      \u003cinput type=\"text\"\n             name=\"value\"\n             data-name=\"input\"\n             data-action=\"search\"\n             data-action-type=\"input\"\n             placeholder=\"Search for something\"\u003e\n      \u003cdiv data-name=\"resultsContainer\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nSee the [complete example](./example/index.html).\n\nYou can either provide a `source` parameter or pass a `query` function which retrieves data from server and return an array of suggestions.\n\n### Optional parameters\n\n#### `search`\n\nThe function against which are evaluated the suggestions. Have to return either `true` or `false`.\n\n#### `texts`\n\nAll appearing texts can be replaced by passing parameters within this object:\n\n* `close-text` : '×'\n* `type-suggestions` : 'Type to search values'\n* `no-results` : 'There are no results matching'\n\n#### `cssClasses`\n\nAll css classes can be replaced by passing parameters within this object:\n\n* `token-list` : Used in the list of tokens\n* `list-input-holder` : Used to style the list element in which is contained the input\n* `list-token-holder` : Used to style the list element in which are contained tokens\n* `input-text` : Used to style the input element\n* `delete-anchor` : Used to style the delete anchor which is meant to delete a token from the list\n* `suggestion-selector` : Used to style the div which holds suggestions and hints\n* `suggestions-list-element` : Used to style the list elements for suggestions\n* `highlighted-suggestion` : Used to highlight suggestions within the list when navigating or hovering\n\n#### `minChars`\n\nMinimum chars you need to write for the suggestions to appear.\n\n#### `maxSelected`\n\nOption to cap the ammount of tokens you can add.\n\n#### `showSuggestionOnFocus`\n\nOption to show type suggestion when focus on the element.\n\n#### `showMessageOnNoResults`\n\nOption to show a message if no suggestions are available.\n\n#### `cleanInputOnHide`\n\nOption to clean the input when suggestions are hidden.\n\n#### `initValue`\n\nArray of initial values you want to see added when plugin inits\n\n#### `allowAddingNoSuggestion`\n\nOption that allows you to add a value on enter even if it's not on the suggestions.\n\n#### `suggestionsZindex`\n\n`z-index` value for suggestion's div.\n\n#### `formatSuggestion`\n\nA function that is used to format a suggestion while typing. Function receives two parameters:\n\n* `suggestion` : The value of the full suggestion\n* `value` : The value typed on the input.\n\n#### `query`\n\nA function that is used to retreive suggestions. By default, it will use the internal sources, however you can write your\nown function to query a database and return an array of suggestions. This function receives two parameters\n\n* `query` : The value entered by the user\n* `callback` : The function that you should call, passing the suggestions as an array, once you finished getting your results\n\n\u003e **Note:** `this` will be the widget object, is your responsability to mantain the scope within the callback!\n\n## Events\n\nSome events are fired:\n\n### `add`\n\nWhen an element is added this event is fired. Receives the value added as a parameter.\n\n### `remove`\n\nWhen an element is removed, this event is fired. Receives the value removed as a parameter.\n\n### `max`\n\nIf you specify the `maxSelected` option to a value greater than `0', this event will be fired whenever you reach that\n ammount of tokens added.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirstandthird%2Ftokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirstandthird%2Ftokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirstandthird%2Ftokens/lists"}