多选搜索

Question

我想为多选创建搜索，但是我不知道从哪里开始。

我希望搜索删除所有其他选项，只显示与搜索匹配的选项（搜索将遍历除电子邮件之外的每个单词（名字，姓氏和用户名）。

我将在键盘上创建事件侦听器，但此后我真的不知道如何继续。

这是我的选择的样子：

$("#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>

Answer 1

您可以执行以下操作，它将显示包含options值的input：

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

工作演示

$("#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>

Answer 2

喜欢吗？

在Chrome和Edge中进行了测试-在IE11中不起作用

我添加了一种解决方法-由于stacksnippets不在IE中运行，因此测试起来有点困难，因此我做了fiddle

由于某些原因，直到将鼠标悬停在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>