https://github.com/speciesfilegroup/taxonworks_autocomplete
A embedable javascript autocomplete that references a TaxonWorks API
https://github.com/speciesfilegroup/taxonworks_autocomplete
autocomplete javascript taxon-name taxonomy
Last synced: about 1 year ago
JSON representation
A embedable javascript autocomplete that references a TaxonWorks API
- Host: GitHub
- URL: https://github.com/speciesfilegroup/taxonworks_autocomplete
- Owner: SpeciesFileGroup
- Created: 2021-10-17T15:42:12.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-20T21:43:50.000Z (over 4 years ago)
- Last Synced: 2024-04-29T00:20:37.824Z (about 2 years ago)
- Topics: autocomplete, javascript, taxon-name, taxonomy
- Language: JavaScript
- Size: 49.8 KB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# taxonworks_autocomplete
A embedable javascript autocomplete that references a TaxonWorks API
## Install
### Package manager
You can install the latest version with the npm CLI command:
```bash
npm install @sfgrp/tw-autocomplete
```
As an alternative you can use the Yarn CLI command:
```bash
yarn add vue
```
```javascript
import TWAutocomplete from '@sfgrp/tw-autocomplete'
import '@sfgrp/tw-autocomplete/dist/style.css'
const autocomplete = new TWAutocomplete('#taxonworks-autocomplete', options)
```
### CDN
You can copy and paste the following tags into your HTML file.
```html
```
## Setup
There are two ways to setup TWAutocomplete. The easiest way is to let TWAutocomplete auto discover your inputs automatically. For that, you simply need to provide a data attribute to your input.
### Declarative
Add `data-taxonworks-autocomplete="true"` attribute to input elements to initialize it.
To pass the options you need to add the prefix `data-` and write the option in kebab-case, like the following example:
```html
```
### Imperative
You can initialize it by instantiating the TWAutocomplete class
```html
```
```javascript
import TWAutocomplete from '@sfgrp/tw-autocomplete'
import '@sfgrp/tw-autocomplete/dist/style.css'
const autocomplete = new TWAutocomplete('#taxonworks-autocomplete', options)
```
### Options object
```javascript
{
project_id: 16, // project id
resource: "taxon_names", // TaxonWorks controller route
token: '', // User token
api_version: 1, // API version. default = 1
threshold: 2, // Min string length before make request. Default = 2
debounce: 1000, // Waiting time before to make a request. Default = 2
projectToken: '', // Project token. Don't use together with a user token.
events: { // (Optional) Callback events
select: () => {}
}
}
```