jQuery and jQuery UI Based Input Element Enhancement - Input-O-Saurus Text
File Size: | 29 KB |
---|---|
Views Total: | 1998 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.