Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Multi-value Input control (gallery-multivalue-input) on cdn

Last Updated: 06/11/12

+ 2 -

Mayank Gupta

YUI Contributor

See 1 more by this user.

Created: 06/7/12
Last CDN Push: 08/1/12
Build Tag: gallery-2012.08.01-13-16
Project: YUI 3
License: YUI BSD
YUI Version: 3.6.0pr2
Free for use.

A multi value input control is nice way to select multiple value from user. Best example is Yahoo mail while composing a message user may wants to send message to multiple address. HTML has multiple select control but it's too ugly and complex.

This plugin will allow user to select multiple value (coming from autocomplete plugin) and will also have nice remove icon on selected value to remove from selection list.

Tags:
mzgupta

Code Sample

<script src="http://yui.yahooapis.com/3.6.0pr2/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.08.01-13-16'
}).use("gallery-multivalue-input",'autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) {
  var states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Dakota',
    'North Carolina',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Pennsylvania',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming'
  ];
 
 
  var node = Y.one('#mayank');
  node.plug(Y.Plugin.AutoComplete, {
	    resultFilters    : 'phraseMatch',
	    resultHighlighter: 'phraseMatch',
	    source           : states
  })
  node.plug(Y.MultiValueInput);
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.08.01-13-16'
}).use("gallery-multivalue-input",'autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) {
  var states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Dakota',
    'North Carolina',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Pennsylvania',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming'
  ];

var node = Y.one('#mayank');
  node.plug(Y.Plugin.AutoComplete, {
	    resultFilters    : 'phraseMatch',
	    resultHighlighter: 'phraseMatch',
	    source           : states
  })
  node.plug(Y.MultiValueInput);
});