Simple jQuery Tab Completion Plugin - Tab Complete

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.