/popSelect

A jQuery plugin transforming a selectbox to popover tagger system

Primary LanguageJavaScript

PopSelect jQuery plugin

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
	});
});

Examples

Options

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