Search in a multi-select

Question

I want to create a search for a multi-select but i have no idea where to start.

I'd want the search to remove all the other options and only show the one that matches the search(the search would go through each word(first name, last name, and also username) excepting email.

I'd create the event listener on the keyup but after that I literally have no idea on how to continue.

This is how my select looks like:

 $("#addselect_searchtext").keyup(function() { alert("do_search?"); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="span5"> <label for="addselect">Users</label> <div class="userselector" id="addselect_wrapper"> <select name="addselect" id="addselect" size="20" class="form-control" style=""> <optgroup id="toexec" label="All Students (2)"> <option value="2">Admin User (admin, andrei@yahoo.com)</option> <option value="3">Student Test (student, studenttest@mailinator.com</option> </optgroup> </select> <div class="form-inline"> <label for="addselect_searchtext">Search</label><input type="text" name="addselect_searchtext" id="addselect_searchtext" size="15" value="" class="form-control"><input type="button" value="Clear" class="btn btn-secondary mx-1" id="addselect_clearbutton" disabled=""></div> </div> </div> 

Answer 1

You can do something like this, It will show those options that contains the value of your input :

$("#addselect_searchtext").keyup(function() {
  var thisVal = $(this).val().toLowerCase();
  $('#addselect option').css("display",function() {
    return $(this).text().toLowerCase().indexOf(thisVal) > -1 ? "block" : "none";
  });
});

Working demo

 $("#addselect_searchtext").keyup(function() { var thisVal = $(this).val().toLowerCase(); $('#addselect option').css("display",function() { return $(this).text().toLowerCase().indexOf(thisVal) > -1 ? "block" : "none"; }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="span5"> <label for="addselect">Users</label> <div class="userselector" id="addselect_wrapper"> <select name="addselect" id="addselect" size="20" class="form-control" style=""> <optgroup id="toexec" label="All Students (2)"> <option value="2">Admin User (admin, andrei@yahoo.com)</option> <option value="3">Student Test (student, studenttest@mailinator.com</option> </optgroup> </select> <div class="form-inline"> <label for="addselect_searchtext">Search</label><input type="text" name="addselect_searchtext" id="addselect_searchtext" size="15" value="" class="form-control"><input type="button" value="Clear" class="btn btn-secondary mx-1" id="addselect_clearbutton" disabled=""></div> </div> </div> 

Answer 2

Like this?

Tested in Chrome and Edge - it does not work in IE11

I added a workaround - it is a bit hard to test since stacksnippets don't run in IE so I have made a fiddle

For some reason the disable/enable does not show until you mouse over the select in IE11

 $("#addselect_searchtext").on("input",function() { var val = this.value.toLowerCase() $("#toexec option").each(function() { var show = $(this).text().toLowerCase().indexOf(val) !=-1; $(this).toggle(show) $(this).prop("disabled",!show) }) $("#addselect_clearbutton").prop("disabled",this.value=="") }); $("#addselect_clearbutton").on("click",function() { $("#addselect_searchtext").val("").trigger("input") }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="span5"> <label for="addselect">Users</label> <div class="userselector" id="addselect_wrapper"> <select name="addselect" id="addselect" size="5" class="form-control" style=""> <optgroup id="toexec" label="All Students (2)"> <option value="2">Admin User (admin, andrei@yahoo.com)</option> <option value="3">Student Test (student, studenttest@mailinator.com</option> </optgroup> </select> <div class="form-inline"> <label for="addselect_searchtext">Search</label><input type="text" name="addselect_searchtext" id="addselect_searchtext" size="15" value="" class="form-control"><input type="button" value="Clear" class="btn btn-secondary mx-1" id="addselect_clearbutton" disabled=""></div> </div> </div>