如何在下拉菜单中添加搜索输入字段？

Question

我正在尝试对所有“站”进行下拉。 我已经设法将数据库中的所有数据放入下拉菜单，但是我想在下拉菜单中添加一个搜索字段，以使用户可以更轻松地搜索所需的“ Station”。 现在是我的下拉菜单的外观：

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

有什么想法可以将其与现有的下拉菜单集成吗？

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

Answer 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..'>")
})

Answer 3

您可以为此使用许多可用的库之一。 尝试使用“ Selectpicker”。

示例：考虑您有一个这样的下拉列表

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

如何在下拉菜单中添加搜索输入字段？

问题描述

3 个解决方案

解决方案1
0 2019-05-07 11:52:12

解决方案2
0 2019-05-07 11:56:26

解决方案3
-1 2019-05-07 11:49:27

如何在下拉菜单中添加搜索输入字段？

问题描述

3 个解决方案

解决方案1 0 2019-05-07 11:52:12

解决方案2 0 2019-05-07 11:56:26

解决方案3 -1 2019-05-07 11:49:27

解决方案1
0 2019-05-07 11:52:12

解决方案2
0 2019-05-07 11:56:26

解决方案3
-1 2019-05-07 11:49:27