illustration by @theskywatcher
Inputosaurus Text is an <input> that allows for multiple delimited values, parse hooks, autocomplete, keyboard shortcuts, etc.
- The instantiated input's value is set to a list of values delimited with a comma (outputDelimiter).
- As values are input, if a comma or semi-colon (inputDelimiter) is detected, the value is automatically parsed.
$('#widget1').inputosaurus({
width : '350px'
});
$('#widget2').inputosaurus({
width : '350px',
autoCompleteSource : ['alabama', 'illinois', 'kansas', 'kentucky', 'new york'],
activateFinalResult : true
});
- A good use case for the parse hook is input validation.
- For this example, enter two strings separated with a space to trigger the parse hook (which will surround the strings with double quotes).
$('#widget3').inputosaurus({
width : '350px',
outputDelimiter : ' OR ',
parseHook : function(valArr){
return $.map(valArr, function(val){
return /\s/.test(val) ? '"' + val + '"' : val;
});
}
});
when specified, autocomplete will be instantiated and this value will be passed as the jQuery Autocomplete source
when forcing users to select from an autocomplete list, allow them to press 'Enter' to select an item if it's the only option left
consider duplicated elements only if they are exactly equal (checking the case)
auto parsing trigger
this separator is used to rejoin all input items back to the value of the original <input>
manipulate and return the input value after parseInput() parsing
the array of tag names is passed and expected to be returned as an array after manipulation
optional wrapper for widget