Giter Site home page Giter Site logo

nicknametabcomplete's Introduction

Nickname Tab Complete

Version: 0.8

This plugin detects when a tab key is pressed after an @ symbol and some characters have been typed. You supply the names via a setting.

I used code from all over, so I may need to play with the license, though all borrowed code is open source under some license and attributed.

Example usage

jQuery(document).ready(function ($) {
   $("textarea").nicknameTabComplete({
       nicknames: ["Doug", "PixelGun", "hax0r"]
   }); 
});

Options

  • nickmane_match: This is the regular expression used to match the names. Be very careful when changing this as most changes will break this plugin. I recommend only changing the accepted characters between the brackets.
  • nicknames: This should be an array of acceptable nicknames. They can contain mixed case.
  • on_complete: This is an optional way to bind to the nickname-complete custom event.

Custom Events

This plugin will trigger a nickname-complete custom event whenever a matching attempt is made. It is possible to cancel the completion by calling preventDefault() on the event, or returning false from your handler. In addition to the normal values on the event object, three additional properties are added:

  • value: This is the current state of the completion. It will contain everything between the @ and the end of the know letters of the nickname. If no match is found, this will be empty. If a partial match is found, this will contain that value.
  • matches: This is an array of the availible matches for the current event. If no matches were found, this will be an empty array. If a match was completed, this will contain only one value. If an attempted match matched multiple results, they will all be listed here.
  • caret: Position of the caret at the time the match was attempted. Does not reflect the new position after match.

Example:

$("textarea").bind("nickname-complete", function (e) {
   if (e.matches.length === 1) {
       console.log("A full match was found: " + e.value);
   } else if (e.matches.length > 1) {
       console.log("Multiple matches were found, and this much is shared among the results: " + e.value);
   } else {
       console.log("No matches were found");
   }
});

Example of cancelling the completion:

$("textarea").bind("nickname-complete", function (e) {
    // Don't try to autocomplete `bob`
    if (e.value === "bob") {
        e.preventDefault();
    }
})

Special Behavior Note:

By design this plugin will cancel default tab behavior only if the entry passes a test of the nickname_match regex. This allows the rest of the user experience to be as desired. You can of course attach an additional keypress handler that cancels all tab behaviors if you desire.

License (At least for my code)

Copyright (c) 2010 by Doug Neiner

Dual licensed under the MIT or GPL Version 2 licenses, same license as jQuery: http://jquery.org/license

Additional resources used:

nicknametabcomplete's People

Contributors

dcneiner avatar scottgonzalez avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.