Simple jQuery Tab Completion Plugin - Tab Complete
File Size: | 12.4 KB |
---|---|
Views Total: | 881 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Tab Complete is a simple, lightweight jQuery plugin which adds tab completion functionalities to existing text fields. The plugin allows you to auto-fill in long words in your text fields by typing only a few characters and pressing on the Tab
key.
Basic usage:
1. Add jQuery library and the jQuery tab complete plugin into your web page.
<script src="jquery.min.js"></script> <script src="dist/jquery.tab-complete.min.js"></script>
2. Prepare a list of words for autocomplete and enable the tab completion plugin on an input field.
$("#example-input").tabComplete({ getOptions: function() { return ["John", "Jake", "Joe", "Sam", "Gil", "Ken", "Garret", "Noah", "Emma", "Olivia", "Sophia", "Liam", "Mason", "Jacob", "Ava", "Will", "William", "Andrew", "Brady", "Ethan", "Dan", "Daniel", "Danny"] }, getFormat: function(word, position) { if (position === 0) { return word + ": "; } else { return word; } } });
3. Enable the plugin on a textarea.
$("#example-textarea").tabComplete({ getOptions: function() { return ["Chicago", "New York", "Philidelphia", "Seattle", "San Francisco"] } });
4. Default settings.
// Returns an array of auto-complete words getOptions: function() { console.warn("Options for tab-complete not specified."); return []; }, // Whether or not the auto-completed text should be highlighted // when tabbing through the options. select: true, // Returns the format that the new word should use. // Params are the word in question, // and the position of it in the sentence. getFormat: function(word, position) {}, // Whether or not the plugin should prevent tabbing between inputs, // even when there are no words to auto-complete. preventTabbing: false, // callback onComplete: function(word, possible, next) {}
5. Methods.
// Add an array of words $("#example-input").tabComplete("add", ["Johnathan"]); // Remove an array of words $("#example-input").tabComplete("remove", ["John"]); // Reset the predefined autocomplete list. $("#example-input").tabComplete("reset", ["Ava", "Daniel", "Matt"]);
This awesome jQuery plugin is developed by Jake0oo0. For more Advanced Usages, please check the demo page or visit the official website.