/popSelect

A jQuery plugin transforming a selectbox to popover tagger system

Primary LanguageJavaScript

select popovers

A simple to use jQuery plugin to create popover boxes over select input tags. A radically new way to select multiselect.

Basic Usage

  1. Include jQuery:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  2. Install popSelect using bower or directly from git.

    bower install popSelect

    or

    npm install popselect

    or

    download

  3. Include plugin's js code:

    <link rel="stylesheet" href="css/popSelect.css">
    <script src="js/jquery.popSelect.min.js"></script>
  4. Call the plugin:

    Conside the following select tag.

    <select class="form-control" name="city" id="element" multiple>
    	<option value="green">Green</option>
    	<option value="red">Red</option>
    	<option value="blue">Blue</option>
    	<option value="violet">Violet</option>
    	<option value="orange">Orange</option>
    	<option value="white" selected="selected">White</option>
    </select>
    $(function() {
    	$("#myselect").popSelect({
    		showTitle: false,
    		maxAllowed: 4
    	});
    });

TODO

  • Add support for setting selected='selected' inside multiple select
  • Add support for autofocus option for the select.
  • Add support for initial selected values
  • Add option for general placeholder.
  • Add support for getting value from select.
  • Add support for backspace delete
  • Add support for multidirectional popovers.
  • Auto-growing textarea
  • Add Support for setting maxAllowed input tags
  • Add support for populating the values from a different source
  • Add support for easy theming.
  • Add Sorting Options
  • Better Touch Handling

License

MIT License © Jay Kanakiya