在搜索下拉列表时，是否可以将结果放在顶部

When searching a drop down list is it possible to bring the result to the top?

本文关键字：结果 顶部 是否 搜索 下拉列表      更新时间：2023-09-26

在我的页面上，我有一个包含100多个选项的select列表，我想知道当用户输入一个字符（比如"s"）时，该列表是否会将第一个s结果带到下拉窗口的顶部？

目前的默认行为是将第一个s的结果带到窗口的最底部。

在这个演示中，您可以看到键入一个字母say"p"会将其带到窗口底部。我想把它放在哪里，或者如果没有足够的结果来填满窗口，就尽可能高。

自己对该功能进行编程可能不值得付出这些努力。相反，我建议使用现有的库：

  • 已选择
  • 选择2

以下是Select2文档中的示例代码。您正在寻找的功能将开箱即用。

$(document).ready(function() {
  $(".js-example-basic-single").select2();
});

<select class="js-example-basic-single">
  <option value="AL">Alabama</option>
  <option>...</option>
  <option value="WY">Wyoming</option>
</select>

您应该试试这个。

$(document).ready(function() {});
function filterItems(thisobj) {  
  var removedOption = $("select option").filter(function(i) {
    return ($(this).text().search($(thisobj).val()) < 0);
  }).remove();
  $("select").append(removedOption);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" onchange="filterItems(this);" />
<select>
  <option value="1">ankit</option>
  <option value="">parth</option>
  <option value="">bhavik</option>
  <option value="">dilip</option>
  <option value="">tejas</option>
  <option value="">Zibra</option>
  <option value="">jon</option>
  <option value="">mak</option>
  <option value="">swati</option>
  <option value="2">niks</option>
  <option value="3">sids</option>
  <option value="4">mans</option>
  <option value="5">mit</option>
  <option value="6">vipul</option>
</select>

相关文章：