jquery uses the Selectator plug-in to implement the multiple-select Drop-down list Filter box (source download) _jquery

Selectator is a jquery drop-down list box plug-in that implements multiple selection and search filtering capabilities. It supports searching and can directly affect the original selection box, and the original selection box is used as a data container. The Drop-down list box plug-in allows you to group multiple options, set options icons, search for options, and select multiple selections.

Effect Display source Download

How to use

Using the Drop-down Category box plug-in requires the introduction of FM.SELECTATOR.JQUERY.CSS, jquery, and Fm.selectator.jquery.js files in the page.

<link rel= "stylesheet" href= "Fm.selectator.jquery.css"/> <script src=
"Jquery-1.11.0.min.js" ></ script>
<script src= "Fm.selectator.jquery.js" ></script>

HTML structure

The HTML structure of a Drop-down list with an option with an icon-level grouping option is as follows:

<label for= "Select" > Multi select with custom content: </label> <select id= "Select" name= "select" Multiple > <optgroup label= "Group One" class= "Group_one" > <option value= "1" class= "Option_one" data-subtitle= "Et" data-left= "One</option> <option value= "2" class= "
Option_two "data-subtitle=" to "data-left="  ' data-right= "2" >Two</option> </optgroup> <optgroup label= "Group two" class= "Group_two" > <option value= "3" class= "Option_three" Data-subtitle= "Tre" data-left= "Three</option> < Option value= "4" class= "Option_four" Selected data-left= " Four</option> <option value= "5" class= "Option_five" Selected data-left= " "data-right=" 5 ">Five</option> <option value=" 6 "class=" Option_six "; six</option> </optgroup> <optgroup label= "Group three" class= "Group_three" > <option value= "7" class= "Option_seven" >Seven</option> </optgroup> <option value= "8" class= "Option_eight" Data-subtitle= "Otte" >Eight</option> <option value= "9" class= "Option_nine" >Nine</option> < Option value= "Ten" class= "Option_ten" selected>ten</option> <option value= "one" class= "Option_eleven" Selected>eleven</option> <option value= "a" class= "Option_twelve" >Twelve</option> <option Value= "class=" "Option_thirteen" >Thirteen</option> <option value= "class=" > fourteen</option> </select> <input value= "Activate Selectator" id= "Activate_selectator4" button ">

Initializing Plug-ins

After the page DOM element has been loaded, you can initialize the Drop-down list plug-in with the Selectator () method.

$ (' #selectBox '). Selectator ();

You can also initialize it directly by using a tag:

<select multiple class= "Selectator" data-selectator-keep-open= "true" >

Configuration parameters

$ (' #selectBox '). Selectator ({
prefix: ' selectator_ ',//CSS class prefix
height: ' auto ',//Auto or element
Usedimmer:false,//dims the screen while option list is visible
u**arch:true,//If False, the search boxes are  VED and 
//' Showalloptionsonfocus ' is forced to true
Keepopen:false,//If True, then the dropdown won't close  When 
//selecting options, but stay open until losing focus
showalloptionsonfocus:false,//Shows all options if Input box is empty
selectfirstoptiononsearch:true,//selects the topmost option on every search
searchcallback : function (value) {},//Callback function when enter LS pressed and 
//no option is active in multi select box
l Abels: {
search: ' Search ... '//Placeholder text in search box on single select Box
}
}

Other available Property labels

By using the Data-left, data-right, and data-subtitle tags you can extend the display information for the Drop-down list. They can be styled using CSS, and the CSS prefix is: prefix_title, Prefix_left, Prefix_right, and Prefix_subtitle. This data is pure HTML code, so you can also use the picture code.

<select id= "Selectbox" >
<!--Normal option tag-->
<option value= "1" >this is the title</ Option>
<!--Extended option tag-->
<option value= "2" data-left= "
This is the" Data-right= "This is the" "data-subtitle=", "This Is", "section
under the title" >this is the Title</op Tion>
</select>

The code on will appear as a structure similar to the following:

CSS Class

Class	Describe
Prefix_element	This is a new Drop-down list box. It comes with the same extra class classes:single And multiple , they are used to set whether it is a radio or a multiple selection. Other than that options-visible And options-hidden Used to set whether the option is visible
Prefix_chosen_items	Container of selected options
Prefix_chosen_item	The container for the currently selected option
Prefix_chosen_item_title	The title of the currently selected option
Prefix_chosen_item_left	The contents of the left side of the currently selected option
Prefix_chosen_item_right	The contents of the right side of the currently selected option
Prefix_chosen_item_subtitle	Sub-headings of currently selected options
Prefix_chosen_item_remove	The removal button for the currently selected option
Prefix_input	This is the input box for the selectator. This is used together with options-visible or Options-hidden to show and style it differently if it is a multiple selectio n Box or a single selection box.
Prefix_textlength	Used to calculate the dimensions of input in a multiple selection box
Prefix_options	Options list Container
Prefix_group_header	Group headings
Prefix_group	grouping containers
Prefix_option	The result option. It uses class active to indicate the currently active option
Prefix_option_title	The title of the result option
Prefix_option_left	The content on the left of the result option
Prefix_option_right	Content to the right of the result option
Prefix_option_subtitle	Sub-headings to the right of the result options
Prefix_dimmer	Dimmer

Method

Method	Describe
Refresh	This method is used to refresh the plug-in
Destroy	This method is used to destroy Plug-ins

The GitHub address for the Jquery.selectator-custom drop-down list plug-in is:

Https://github.com/Lepshey/jquery.selectator-custom