Question

我正在尝试在Bootstrap中创建过滤器/搜索功能。每当用户搜索项目时，如果他们选择Enter或“选择”该项目，过滤器就会将选择的结果缩小到一个结果。它应该使用该项目填充字段。我已经掌握了基本功能，但是似乎无法选择零件。

$(document).ready(function() {
  $("#myList").toggle();

  $("#myInput").on("focus", function() {
    $("#myList").toggle();
  });

  $("#myInput").on("focusout", function() {
    $("#myList").toggle();
  });

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Filterable List</h2>
  <p>Type something in the input field to search the list for specific items:</p>
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth</li>
  </ul>
</div>

我的最终目标是能够选择一个项目并使其自动完成并填充字段。

Answer 1

要填充该字段，您只需在项目中放置一个<Button Command="{Binding SelectCommand}"> 事件，然后单击其中的一个，即可获取其文本并在字段中进行设置。

问题是您的click事件在该项目的focusout事件之前触发，因此它在click事件生效之前隐藏了列表。

要解决此问题，您可以设置一个小的超时时间（我放置了100毫秒）以在click事件之后隐藏列表。一切都会正常！

click

$(document).ready(function() {
  $("#myList").toggle();

  $("#myInput").on("focus", function() {
    $("#myList").toggle();
  });

  $("#myInput").on("focusout", function() {
    // Here, it'll wait 100 miliseconds to hide the list.
    setTimeout(function() {
      $("#myList").toggle();
    }, 100);
  });

  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();

    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

  // This is the code to populate the field after selecting an option.
  $("#myList li").on("click", function() {
    var texto = $(this).text();
    $("#myInput").val(texto);
  });
});

如何从Bootstrap过滤器/搜索中获取当前选定的项目？

1 个答案: