jQuery and jQuery UI Based Input Element Enhancement - Input-O-Saurus Text

Input-O-Saurus Text is an input field enhancement plugin for jQuery and jQuery that allows a text input field to have multiple values.

Features:

• Multiple delimited values - The instantiated input's value is set to a list of values delimited with a comma. Good for creating a tags management based on input element.
• Autocomplete - Attaches autocomplete/autosuggest drop down box to text input fields when your users input.
• Parse Hook - A good use case for the parse hook is input validation.
• Keyboard shortcuts

Basic Usage:

1. Include jQuery library and jQuery UI on your page. I recommend you load the javascript files at the bottom of your page to improve the speed of you page load time.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/cupertino/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2. Load the jQuery Input-O-Saurus Text plugin after jQuery and jQuery UI.

<script src="inputosaurus.js"></script> 

3. Create a standard text input field

<input type="text" value="jQueryscript.net" id="widget" />

4. Multiple delimited values

$('#widget').inputosaurus();

5. Autocomplete

$('#widget').inputosaurus({
    width : '350px',
    autoCompleteSource : ['alabama', 'illinois', 'kansas', 'kentucky', 'new york'],
    activateFinalResult : true
});

6. Parse Hook

$('#widget').inputosaurus({
    width : '350px',
    outputDelimiter : ' OR ',
    parseHook : function(valArr){
        return $.map(valArr, function(val){
            return /\s/.test(val) ? '"' + val + '"' : val;
        });
    }
});

7. All the options

$('#widget').inputosaurus({
allowDuplicates: false,
autoCompleteSource: '', // Array, String and Function
activateFinalResult: false, // 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
nputDelimiters: [',', ';'], // auto parsing trigger
outputDelimiter: ',', // this separator is used to rejoin all input items back to the value of the original <input>
parseHook: null, // 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
parseOnBlur: false,
width: 350, 
wrapperElement: null, // optional wrapper for widget
});

Change log:

2014-07-19

• fix for changed autosuggest class name in jqueryui 1.11.0

2014-04-04

• Set caseSensitiveDuplicates default value to false.

---

This awesome jQuery plugin is developed by sproutsocial. For more Advanced Usages, please check the demo page or visit the official website.