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 m-x-1" id="addselect_clearbutton"
        disabled=""></div>
  </div>
</div>

what you mean by search ? is it filtering ? is it going to say it exist or not ? — nAviD, Jun 28 '19 at 12:03
possible duplicate : https://stackoverflow.com/questions/7321896/jquery-find-element-by-text — nAviD, Jun 28 '19 at 12:03
well yea, I pretty much want to filter out all of the options that are not matching the text/letters inserted in the search box. I don't really know what you meant by 'it exists or not?' — john331, Jun 28 '19 at 12:04

Carsten Løvbo Andersen · Answer 1 · 2019-06-28T12:08:56.793

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 m-x-1" id="addselect_clearbutton"
        disabled=""></div>
  </div>
</div>

amazing! any possibility in making it not case-sensitive? should I make the text all uppercase and then process it? — john331, Jun 28 '19 at 12:07

mplungjan · Accepted Answer · 2019-06-28T12:32:10.143

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 m-x-1" id="addselect_clearbutton"
        disabled=""></div>
  </div>
</div>

Be aware that `style="display:none"` (which is what the `.toggle` will add) on ` — freefaller, Jun 28 '19 at 12:14
OK, so on Edge the text disappears, but the option is still there (albeit unselectable). On IE11 and below it simply does nothing — freefaller, Jun 28 '19 at 12:15
@freefaller Don't know what Edge you have, the code works in my Edge identically to how it runs in Chrome — mplungjan, Jun 28 '19 at 12:17
OK, agreed... the fault is if `size` is not used, and it's acting as a "normal" dropdown... then you get the extra unselectable option. But it still stands that it doesn't work on IE11 and below (as you've stated). Sorry for any confusion — freefaller, Jun 28 '19 at 12:21
I added a workaround - it is a bit hard to test since stacksnippets don't run in IE so I have made a [fiddle](https://jsfiddle.net/mplungjan/gn4frpt2/) - I do not know why it does not trigger unless I mouse over the select — mplungjan, Jun 28 '19 at 12:26

Search in a multi-select

2 Answers2