www.ThimbleOpenSource.com

Multi variant input jQuery plugin


This plugin lets you input easily different variants of the input value. Best example is translation into different languages. Let's say that you want to enter the name English, but also optionally in German and French. This is very unobtrusive plugin, which detects focus of the input and then displays little HTML popup to enter optional translations. When you click out of the input and out of the popup, it seemlessly disappears.

First specified variant is used as primary default and is shown as input. Other specified variants are shown in popup box.

Requirements

jQuery 1.6 (because of use of ":focus" selector)

Configuration

$('#id_of_text_input').multi_variant_input(options);

Right now there are 2 options you can specify:

var options = {
// key of the variants object is appended to the name of the input box and value is used as label in popup
// key is appended at the end of the input name like this: input_name => input_name[key]
  variants : {'en':'English','de':'German', 'es':'Spanish'},
// in values you can specify values for each input using its keys
  values: {'en':'Hello','de':'Hallo','fr':'Bonjour'},
// if hoverable is true (default) then popup appears also when input box is hovered
  hoverable : true
};

Usage example

Below is HTML and JS code used for demo, which can you try yourself below.

Javascript

$('#multi_variant_input').multi_variant_input({
    variants: {'en':'English','de':'German','fr':'French'}
    values: {'en':'Hello','de':'Hallo','fr':'Bonjour'}
});

HTML

<input type="text" id="multi_variant_input" input_name="multi_variant_input" value="" />

Demo

Try to click the input box. When the input box has focus, little popup window appears and you can fill variants of the input names. In this example - name in different languages (those are specified in plugin config - see code example)

Download

Zip version (4 kB)

Changelog

October 27, 2011 - released 1.0