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

问题描述：

嗨我想要将组合框转换为过滤搜索字段，因为组合框由60个元素组成，并且很难在这60个元素之间进行删除以找到我们搜索的元素。所以我认为让用户有机会抓住他正在寻找的物品会更简单，而组合框会根据列表自动给出他的建议。HTML - 如何将组合框转换为过滤搜索字段

我们将举一个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>

注：我也用引导的情况下，就必须在代码中使用它。在此先感谢帮助我

答

给一些更多的细节。是关于从数据库或其他在线来源获取数据吗？或者它只是脚本。在你的问题中提供一些更多细节。编辑你的问题。

我认为这个问题是很清楚的。以我给出的组合框为例，我想有可能进入搜索元素而不是滚动搜索 – Dev1996

然后用户可以自己键入他/她想要搜索的字母。确切地说， –

！例如，如果他/她键入B，则列表将仅显示以B开头的字母，并且它将足以选择列表中的元素并且它对应于我们正在寻找的元素 – Dev1996

答

，并在这里你去

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在自己的

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

相关推荐