Multi select with auto suggestion select box

javascript

web developement

plugin

2094

Views

Comments

Multi select with auto suggestion select box

Multiselect plugin to make select multiple values in the list with auto-suggestion features. This plugin support all major browser with keyboard events.

Include the multiselect plugin in your web page

<link rel="stylesheet" type="text/css" href="./css/multiselect.min.css">
<script src="./js/multiselect.min.js"></script>

HTML element

<div class="jmultiselect" id="multiselect"><input type="text" /></div>

Options Input format

Options input format should array format.

var dataArray = ['PHP', 'PowerShell', 'Python', "jquery 1.3", "css",
    "html", "jrain", "js", "json", "jselect", "jautocomplete"
];

Options for output key format.

var dataValue = {
    'PHP': 100,
    'PowerShell': 200,
    'Python': 300,
    "jquery 1.3": 400,
    "css": 500,
    "html": 600,
    "jrain": 700,
    "js": 800,
    "json": 900,
    "jselect": 1000,
    "jautocomplete": 1100
};

Customize plugin options

var option = {
    "options": dataArray,
    "optionValue": dataValue,
    "id": "multiselect",
    "warning": "No data found",
    "outputObject":"lan",
    "outputKey":2,
    "arrowHide":true,
    "input": {
        "type": "text",
        "maxlength": "10",
        "id": "",
        "class": "",
        "placeholder": "Select Language",
        "autofocus": "autofocus",
        "required": "required",
        "onClick": "",
        "onChange": "",
        "onKeyPress": ""
    }
}

Initialize the plugin.

jmultiselect(option);

Options

Description

options

Array format for display value in multiselect.

outputObject

Output object key

OutputKey

Optional, Length of the value

Warning

Optional, If data is not found, that warning message will show.

type

type of input

maxlength

Optional, Set the maxlength to input

Set the id to input

class

Optional, Set the class to input

placeholder

Optional, Set the Placeholder to input

autofocus

Optional, By default autofocus set

required

Optional, Validate required option

arrowHide

Optional, Hide and show the arrow icon

Get Selected Value in Comma separated

var selectedVal = document.getElementById("multiselect").getAttribute("data-value");

Get Selected Value in Customized

var selectedVal = document.getElementById("multiselect").getAttribute("data-selected");

Get Selected value using Change Callback Method

When selecting the options, this callback method will trigger.

jmultiselectChange("multiselect", function (val, txt) {
   // code
});

val - Select box value
txt - Display value

Reset the Multiselect

Reset the values and all options.

jmultireset(id);

Output Format:

Options

Description

outputObject:"dept"

output will be [{"dept":12}]

outputObject:"[]"

output will be [12,13,14]

outputKey

is optional and how much letter for output key

optionValue

{"key":value} key value will be selected when passing the array

data-selected

when we passing the options ouputObject and outputKey

data-value

normal value displayed and comma separated values

For optionValue need to set outputObject also, then output will generate in data-selected.

Keyboard shortcut support

Key

Actions

Tab

Focus the multislelect

Down

Move to next option

Move to Previous option

Enter

Open the pop up

Space

Open the pop up

Esc

Close the pop up