https://github.com/samthor/advanced-input
Advanced <input> or <textarea> elements
https://github.com/samthor/advanced-input
Last synced: 8 months ago
JSON representation
Advanced <input> or <textarea> elements
- Host: GitHub
- URL: https://github.com/samthor/advanced-input
- Owner: samthor
- License: apache-2.0
- Created: 2019-02-09T03:08:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-11-21T21:25:54.000Z (over 4 years ago)
- Last Synced: 2025-02-02T08:11:19.573Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://samthor.github.io/advanced-input/demo/
- Size: 119 KB
- Stars: 9
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Library which provides the `` Web Component, to enable autocomplete, custom annotations/markup, and retaining user selection even without foucs.
This is ideal for "hero" inputs: e.g., a primary search box, composing email, or entering a chat message.
As seen [on Twitter](https://twitter.com/samthor/status/1101283110186967042).
🚨 **This is unpolished** and should only be used for experiments!
[Try the demo](https://samthor.github.io/advanced-input/demo/)!
## Usage
Install on Yarn/NPM via `advanced-input`.
The Web Component is somewhat opinionated and describes its own styling and annotates words under your cursor with a subtle highlight (as per the Twitter demo above).
Add the dependency to your JS and register it as a CE:
```js
import * as advancedInput from 'advanced-input';
const ai = /** @type {advancedInput.AdvancedInputElement} */ (document.createElement('advanced-input'));
```
Then add the element to your page, optionally adding the `multiline` attribute for a multiline text input:
```html
```
The CE emits a number of events, whose names are under `advancedInput.eventNames`:
* `change` when the user types something
* `select` when the user's selection changes
* `nav` when the user attempts to go up/down from the contents
* `spaceKey` when the user presses space