可搜索的选择选项

Question

反正有选择选项为可选/自动完成/可搜索吗？不幸的是，我无法更改表格。所以我不能将选择选项更改为文本字段。但我能够访问CSS和JavaScript。

以下是选择选项。

<select name="siteID" id="siteID" class="abcd" style="width:100%" /> 
            <option value='0' selected='true'> Not associated to any Circuit ID </option>
            <option value='2101' > 1007345136 </option> 
            <option value='2102' > 1007921321 </option> 
            <option value='2103' > 1007987235 </option> 
            <option value='2407' > 132 </option> 
            <option value='2408' > 141 </option> 
            <option value='2409' > 142 </option> 
            <option value='2410' > 145 </option> 
            <option value='2701' > 225 </option> 
            <option value='2702' > 248 </option> 
            <option value='2703' > 251 </option> 
            <option value='2704' > 254 </option> 
            <option value='2705' > 264 </option> 
            <option value='1804' > 27 </option> 
            <option value='2706' > 274 </option> 
            <option value='2707' > 310 </option> 
            <option value='2708' > 311 </option> 
            <option value='3001' > 333 </option> 
            <option value='2401' > 38 </option> 
            <option value='2402' > 64 </option> 
            <option value='2403' > 68 </option> 
            <option value='2404' > 69 </option> 
            <option value='2405' > 76 </option> 
            <option value='2406' > 81 </option> 
            <option value='2411' > abc123post </option> 
            <option value='3301' > circuit id 50 </option> 
            <option value='2105' > fadhil </option> 
            <option value='2104' > faisal </option> 
            <option value='3002' > IPEN - SITE TEST </option> 
            <option value='3601' > Manual Circuit ID </option> 
            <option value='3302' > new circuit id fadhil </option> 
            <option value='1809' > try iframe </option> 
        </select>

是否有任何javascript / jquery和CSS可以将其转换为可搜索的。

Answer 1

好的，我知道你不能将 select 更改为其他任何内容，但那些正在搜索类似内容的人可以将 select 更改select为datalist，这很简单：

<input list="weekday">
<datalist id="weekday">
  <option value="Sunday">
  <option value="Monday">
  <option value="Tuesday">
  <option value="Wednesday">
  <option value="Thursday">
  <option value="Friday">
  <option value="Saturday">
</datalist>  

Answer 2

您可以考虑使用一个名为Select2的jQuery插件。您不能自动关闭<select>标签！您可以通过以下方式使用它：

$(function () {
  $("select").select2();
});

@import url(https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<select name="siteID" id="siteID" class="abcd" style="width:100%">
  <option value='0' selected='true'> Not associated to any Circuit ID </option>
  <option value='2101' > 1007345136 </option> 
  <option value='2102' > 1007921321 </option> 
  <option value='2103' > 1007987235 </option> 
  <option value='2407' > 132 </option> 
  <option value='2408' > 141 </option> 
  <option value='2409' > 142 </option> 
  <option value='2410' > 145 </option> 
  <option value='2701' > 225 </option> 
  <option value='2702' > 248 </option> 
  <option value='2703' > 251 </option> 
  <option value='2704' > 254 </option> 
  <option value='2705' > 264 </option> 
  <option value='1804' > 27 </option> 
  <option value='2706' > 274 </option> 
  <option value='2707' > 310 </option> 
  <option value='2708' > 311 </option> 
  <option value='3001' > 333 </option> 
  <option value='2401' > 38 </option> 
  <option value='2402' > 64 </option> 
  <option value='2403' > 68 </option> 
  <option value='2404' > 69 </option> 
  <option value='2405' > 76 </option> 
  <option value='2406' > 81 </option> 
  <option value='2411' > abc123post </option> 
  <option value='3301' > circuit id 50 </option> 
  <option value='2105' > fadhil </option> 
  <option value='2104' > faisal </option> 
  <option value='3002' > IPEN - SITE TEST </option> 
  <option value='3601' > Manual Circuit ID </option> 
  <option value='3302' > new circuit id fadhil </option> 
  <option value='1809' > try iframe </option> 
</select>