如何在下拉菜單中添加搜索輸入字段？

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