<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <select name="test" multiple="multiple" id="test"> <option value="test1">test1</option> <option value="test2">test2</option> <option value="test3">test3</option> <option value="test4">test4</option> <option value="test5">test5</option> <option value="test6">test6</option> <option value="test7">test7</option> <option value="test8">test8</option> <option value="test9">test9</option> <option value="test10">test10</option> <option value="test11">test11</option> <option value="test12">test12</option> <option value="test13">test13</option> <option value="test14">test14</option> <option value="test15">test15</option> <option value="test16">test16</option> <option value="test17">test17</option> <option value="test18">test18</option> <option value="test19">test19</option> <option value="test20">test20</option> <option value="test21">test21</option> <option value="test22">test22</option> </select> <p id="obj"></p>

$(document).ready(function(){ $("#test").hide(); var list = {}; $("#test > option").each(function(){ list[$(this).text()] = $(this).val(); }); var listVal = "{"; for(var property in list) { if(list.hasOwnProperty(property)) { listVal += property + ":" + list[property] + ","; } } listVal += ":}"; var listTable = "<br><div id=\"mulSelDiv\" style=\"height:300px;overflow:auto;width:170px\">" + "<table id=\"mulSelTable\" class=\"table table-bordered\" style=\"overflow:auto;height:30px;width:150px\">"; for(var property in list) { if(list.hasOwnProperty(property)) { listTable += "<tr><td>" + property + "</tr></td>"; } } listTable += "</table></div>"; var searchInput = "<br><input class=\"form-control input-small\" type='text' id='mulSelSearch' style=\"width:150px;\"/><br><br>"; $(searchInput).insertAfter("#test"); $(listTable).insertAfter("#mulSelSearch"); $("#snippet-preview").on("change","#mulSelSearch",function(){ var q = $(this).val(); $("#mulSelTable > tr").each(function(){ if($(this).html().indexOf(q) > -1) { //$(this).hide(); } else { $(this).hide(); } }) }); //$("#obj").html(listVal); })