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

然后你去

＆＃13;

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:');
        }
    }
}

＆＃13;

#widthset{
width=500px;
}

＆＃13;

<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>

＆＃13;

在您自己的

上应用CSS

Answer 2

提供更多详情。是从数据库或其他一些在线资源中获取数据。或者只是脚本。在您的问题中提供更多详细信息。编辑你的问题。

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

2 个答案: