如何在下拉列表中添加搜索输入字段？答案

【问题标题】：How can i add a search input field in my dropdown?如何在下拉列表中添加搜索输入字段？
【发布时间】：2019-05-07 11:45:50
【问题描述】：

我正在尝试对我的所有“站”进行下拉。我已经设法将数据库中的所有数据放入我的下拉列表中，但我想在我的下拉列表中添加一个搜索字段，以便用户更轻松地搜索想要的“站”。以下是我的下拉菜单目前的样子：

<div>
    <select class="form-control">
        <option>--Select--</option>       
        @foreach (var item in ViewBag.ListOfDropdown)
        {
            <option value="@item.Id">@item.Name</option>
        }
    </select>
</div>

这就是我希望如何查看我的下拉列表（只是在 w3school 上找到的一个示例）：

<ul class="dropdown-menu">
      <input class="form-control" id="myInput" type="text" placeholder="Search..">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">Bootstrap</a></li>
      <li><a href="#">Angular</a></li>
    </ul>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".dropdown-menu li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

如果我可以将它与我现有的下拉菜单集成，有什么想法吗？

【问题讨论】：

你可以试试jQueryUi autocomplete
你可以使用select2引导库，看这个例子：select2.github.io/select2-bootstrap-theme/4.0.3.html
你检查过whole example on w3schools吗？有一个简单的搜索下拉示例，包括 3 个步骤。

标签： javascript c# html css

【解决方案1】：

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".dropdown-menu li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="dropdown-menu">
    <input class="form-control" id="myInput" type="text" placeholder="Search.."> @foreach (var item in ViewBag.ListOfDropdown) {
    <li><a href="#">@item.Name</a></li>
    }
  </ul>
</div>

【讨论】：

【解决方案2】：

我想稍微不同意其他答案。你不需要那么多东西来让它工作。 你只需要一两行js。由于您使用的是 jquery，因此很容易让 razor 完成它的工作（如在创建 html 中），并且一旦文档准备就绪，就可以像输入纯 html 一样添加输入。

$(document).ready(() => {
  $(".dropdown-menu").prepend("<input class='form-control' id='myInput' type='text' placeholder='Search..'>")
})

.dropdown-menu {
  display: block;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown-menu">

  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">jQuery</a></li>
  <li><a href="#">Bootstrap</a></li>
  <li><a href="#">Angular</a></li>
</ul>

以及 ES5 中的 js：

$(document).ready(function() {
$(".dropdown-menu").prepend("<input class='form-control' id='myInput' type='text' placeholder='Search..'>")
})

或者在你的情况下：

ES5：

$(document).ready(function() {
$(".form-control").prepend("<input class='form-control' id='myInput' type='text' placeholder='Search..'>")
})

胖箭头：

$(document).ready(() => {
  $(".form-control").prepend("<input class='form-control' id='myInput' type='text' placeholder='Search..'>")
})

【讨论】：

我知道这听起来可能很愚蠢...但由于某种原因，javascript 无法完成工作，即使我将其插入<script> 标签之间...
哪一个？如果胖箭头不起作用，那是因为它是 ES6。试试 ES5。如果它不起作用，那么错误是什么？此外，来自 w3schools 的示例正在使用 jquery。你在用 jquery 吗？
我设法使它工作不知何故，但如果我将<ul> 的类设置为dropdown-menu 出于某种原因甚至不显示下拉菜单，如果我将类设置为form-control（我的）我得到一个项目列表，但输入框在列表后面发送（列表与文本框重叠）
如果下拉菜单没有显示，那么它的 css 可能设置为 display: none?我不知道你的css。但至少我的回答有效。
@secene 如果您找到了答案，请不要忘记接受它作为答案，以便其他遇到您问题的用户能够弄清楚。

【解决方案3】：

您可以为此使用众多可用库之一。尝试使用“选择选择器”。

示例：考虑一下你有这样的下拉菜单

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap- select@1.13.9/dist/css/bootstrap-select.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
</head>

<select name="stations" id="stations">
     <option>Station 1</option>
     <option>Station 2</option>
     <option>Station 3</option>
</select>

<script>
    $(document).ready(function(){
        $("#stations").selectpicker();
});
</script>

链接：https://developer.snapappointments.com/bootstrap-select/

【讨论】：

请在您的答案中添加代码。仅链接的答案被删除，不仅因为它们的长度短且缺乏解释，还因为链接断开并且对未来的用户没有用处