多選搜索

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

Answer 1

您可以執行以下操作，它將顯示包含input值的那些options ：

$("#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 mx-1" id="addselect_clearbutton" disabled=""></div> </div> </div> 

Answer 2

像這樣？

經過Chrome和Edge測試-在IE11中不起作用

我添加了一種解決方法-由於stacksnippets無法在IE中運行，因此測試起來有點困難，所以我做了一個小提琴

由於某些原因，直到將鼠標懸停在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>