javascript - HTML - 如何将组合框转换为过滤搜索字段

Question

嗨，我想将组合框转换为过滤搜索字段，因为组合框由 60 个元素组成，并且很难在这 60 个元素中查找我们搜索的元素。所以我认为让用户有机会捕获他正在寻找的项目并且组合框会根据列表自动给他建议会更简单。

我们将制作一个包含 5 个元素的组合框示例。这是我的代码

<select name="example">
    <option value="A">A</option>
    <option value="B">A</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
</select>

注意:我还使用 Bootstrap ，以防有必要在代码中使用它。预先感谢您帮助我

Answer 1

给你

function searchSelect(searchForID, searchInID) {
    var input = document.getElementById(searchForID).value.toLowerCase();
    var output = document.getElementById(searchInID).options;

    for (var i = 0; i < output.length; i++) {
        if (output[i].text.toLowerCase().indexOf(input) < 0) {
            output[i].style.display = "none";
            output[i].setAttribute('style', 'display:none');

        } else {
            output[i].style.display = "";
            output[i].setAttribute('style', 'display:');
        }
    }
}

#widthset{
width=500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Search:
<input type="text" size="25" ID="searchFor" onkeyup="searchSelect(this.id,'searchIn')">
<br />
<br />
<div class="widthset">
<select size="6" multiple="multiple" class="form-control" name="searchIn" id="searchIn">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    </select>
    </div>

自行应用CSS