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

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

FROM alpine:3.9.3

RUN apk add --no-cache --update \
  python3 \
  python3-dev \
  uwsgi \
  uwsgi-python3 \
  uwsgi-http \
  uwsgi-gevent

CMD ["sh"]

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

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

3 个答案: