simplicityInputs

Binding HTML inputs to state.

We progressively enhance the standard HTML input elements to bind them to the widget state and thus decouple UI features from the backend search specific widgets.

Changes to the inputs are automatically reflected in the state. Changes to the state are automatically reflected in the inputs.

To bind a single input to the state, first create the input.

<input type="text" name="example">

Then apply the simplicityInputs widget to it.

$('input').simplicityInputs();

Changes to the input will cause the state to be updated and changes to the state will be reflected in the input.

Example

Change the value in 1, deselect and the state JSON in 2 is updated.

Alter the JSON in 2, deselect and the value in 1 is updated.

To bind a single textarea to the state, first create the input.

<textarea type="text" name="example"> </textarea>

Then apply the simplicityInputs widget to it.

$('textarea').simplicityInputs();

Changes to the textarea will cause the state to be updated and changes to the state will be reflected in the textarea.

Example

Change the value in 1, deselect and the state JSON in 2 is updated.

Alter the JSON in 2, deselect and the value in 1 is updated.

To bind a set of <input type="checkbox"> to the state, first create the inputs.

<fieldset>
  <label><input type="checkbox" name="example" value="1" /> First</label>
  <label><input type="checkbox" name="example" value="2" /> Second</label>
  <label><input type="checkbox" name="example" value="3" /> Third</label>
</fieldset>

Then apply the simplicityInputs widget to them.

$('fieldset').simplicityInputs();

Changes to the checkboxes will cause the state to be updated and changes to the state will be reflected in the checkboxes.

Example

Change the value in 1, deselect and the state JSON in 2 is updated.

Alter the JSON in 2, deselect and the value in 1 is updated.

To bind a set of <input type="radio"> to the state, first create the inputs.

<fieldset>
  <label><input type="radio" name="example" value="a" /> Alpha</label>
  <label><input type="radio" name="example" value="b" /> Bravo</label>
  <label><input type="radio" name="example" value="c" /> Charlie</label>
</fieldset>

Then apply the simplicityInputs widget to them.

$('fieldset').simplicityInputs();

Changes to the checkboxes will cause the state to be updated and changes to the state will be reflected in the checkboxes.

Example

Change the value in 1, deselect and the state JSON in 2 is updated.

Alter the JSON in 2, deselect and the value in 1 is updated.

To bind a single <select> to the state, first create the select.

<select name="example">
    <option value="">Any...</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

Then apply the simplicityInputs widget to it.

$('select').simplicityInputs();

Changes to the checkboxes will cause the state to be updated and changes to the state will be reflected in the checkboxes.

Example

Change the value in 1, deselect and the state JSON in 2 is updated.

Alter the JSON in 2, deselect and the value in 1 is updated.

To bind a multiple <select> to the state, first create the select.

<select name="example" multiple="multiple">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

Then apply the simplicityInputs widget to it.

$('select').simplicityInputs();

Changes to the checkboxes will cause the state to be updated and changes to the state will be reflected in the checkboxes.

Example

Change the value in 1, deselect and the state JSON in 2 is updated.

Alter the JSON in 2, deselect and the value in 1 is updated.

To bind a multiple single-select capable input`s to the state, first create them.

<input name="example"/>

<label><input type="radio" name="example" value="a" />Alpha</label>
<label><input type="radio" name="example" value="b" />Bravo</label>
<label><input type="radio" name="example" value="c" />Charlie</label>

<select name="example">
    <option value="">Any...</option>
    <option value="a">Alpha</option>
    <option value="b">Bravo</option>
    <option value="c">Charlie</option>
</select>

Then apply the simplicityInputs widget to it.

$(':input').simplicityInputs();

Changes to the checkboxes will cause the state to be updated and changes to the state will be reflected in the checkboxes.

Example

Change the value in 1, 2 or 3, deselect and the state JSON in 4 is updated.

Alter the JSON in 4, deselect and the values in 1, 2 and 3 are updated.

To bind a multiple mutli-select capable inputs to the state, first create them.

<label><input type="checkbox" name="example" value="a" />Alpha</label>
<label><input type="checkbox" name="example" value="b" />Bravo</label>
<label><input type="checkbox" name="example" value="c" />Charlie</label>

<select name="example">
    <option value="a">Alpha</option>
    <option value="b">Bravo</option>
    <option value="c">Charlie</option>
</select>

Then apply the simplicityInputs widget to it.

$(':input').simplicityInputs();

Changes to the checkboxes will cause the state to be updated and changes to the state will be reflected in the checkboxes.

Example

Change the value in 1 or 2, deselect and the state JSON in 3 is updated.

Alter the JSON in 3, deselect and the values in 1 and 2 are updated.