jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

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

<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="<img src='images/ingi.png'>" data-right="1">One</option><option value="2" class="option_two" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option></optgroup><optgroup label="Group two" class="group_two"><option value="3" class="option_three" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option><option value="4" class="option_four" selected data-left="<img src='images/noimage.png'>" data-right="4">Four</option><option value="5" class="option_five" selected data-left="<img src='images/noimage.png'>" 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="10" class="option_ten" selected>Ten</option><option value="11" class="option_eleven" selected>Eleven</option><option value="12" class="option_twelve">Twelve</option><option value="13" class="option_thirteen">Thirteen</option><option value="14" class="option_fourteen">Fourteen</option></select><input value="activate selectator" id="activate_selectator4" type="button">

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

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

$('#selectBox').selectator({prefix: 'selectator_', // CSS class prefixheight: 'auto', // auto or elementuseDimmer: false, // dims the screen when option list is visibleu**arch: true, // if false, the search boxes are removed and // `showAllOptionsOnFocus` is forced to truekeepOpen: false, // if true, then the dropdown will not close when // selecting options, but stay open until losing focusshowAllOptionsOnFocus: false, // shows all options if input box is emptyselectFirstOptionOnSearch: true, // selects the topmost option on every searchsearchCallback: function(value){}, // Callback function when enter is pressed and // no option is active in multi select boxlabels: {search: 'Search...' // Placeholder text in search box in single select box}});

<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 left section"data-right="This is the right section"data-subtitle="This is the section under the title">This is the title</option></select>