OmnInput is a UI component that replaces long HTML forms, putting everything together in just one input bar with filter and tokenization.
OmnInput.js allow you to replace this:
with this:
Check out our Live Preview
<script>
$(document).ready(function() {
const keys = [{label: 'Plate', id: 'plate'}, ...];
const componentId = 'omnInputContainer';
const postUrl = '/post';
var omnInput = OmnInput.create(keys, componentId, postUrl);
$('#sendButton').click(function() {omnInput.sendData()});
});
</script>🚨 Important Notes
Check out our example for more information like installation, or how to add additional Form Input and display error messages.
For each provided Key (which consists of an object with label and id property), OmnInput will display to the user the Key Menu using the label property.
When the user clicks the OmnInput or when it receives focus, the available keys are displayed. As the user types some text, the available keys are filtered to just those that match the provided text. The user can choose those using the keyboard or the mouse.
After choosing a key, the OmnInput starts the Value Mode, when the user can freely type any value. To tokenize this value and proceed to add a new key/value pair, the user can press the Enter key.
With the execution of the function sendData(), which can be attached to a button or any other Element, the OmnInput creates an HTML Form and submit it to the provided Post URL. For each key/value pair, it'll create a form input using the id propriety from the Key.
First, thank you for your contribution. If you want to contribute, feel free to search for open issues or our project roadmap, we have a lot of work to do, and of course we'll need you.
-
Fork the repository to send PRs
-
Clone your fork, use SSH if possible (
git clone git@github.com:<your-username>/omnInput.git). Read more about it over here. -
cdinto the project directory -
Checkout the
masterbranch (should be the default) -
Create a new branch for the new feature:
git checkout -b new-feature -
Make your changes and commit it:
git add . && git commit -am "Add new feature" -
Push to the branch:
git push origin new-feature -
Submit a pull request with full remarks documenting your changes.
🚨 Important Notes
- We are in an effort to use TDD and Clean Code, so despite the first version code, we ask all contributors to adopt TDD and Clean Code Discipline in the new features.
There is a small testing framework in the test folder. All static functions in the test.js will be executed as test functions when you open the runtests.html on your browser.
Exemple:
static givenClickEventOnSomeThingThenExecuteThatThing() {
// Preparation
const isOk = false;
OmnInputTests.omnInput.status = isOk;
// Action
OmnInputTests.omnInput.toggleStatus();
// Assertion
return assertTRue(OmnInputTests.omnInput.status);
}MIT License © OmnInput.js