Question

我有这个代码过滤输入并将它们作为弹出按钮显示，但每次keyup事件发生时，搜索应清空列表并附加新列表;相反，它只是继续附加到列表。

我尝试使用empty()，但它没有清空。我甚至尝试过html()和html('')，但没有运气。

我的HTML：

<div class="related-widget-wrapper">
    <select id="id_user" name="user" required="">
        <option value="" selected="selected">---------</option>
        <option value="3">abc</option>
        <option value="1">admin</option>
        <option value="2">hello</option>
    </select>
</div>

我的js：

var filterInput = '<input type="text" id="customFilter" placeholder="Filter" />';
var filterPopUp = '<div class="filterPop" style="border: 1px solid #000; min-height: 100px; min-width: 200px; display: none; position: fixed; left: 50%; top: 50%;"></div>';
var newList = "";
$("#id_user")
    .closest(".related-widget-wrapper")
    .append(filterInput, filterPopUp);

$("#customFilter").on("keyup", function() {
    $(".filterPop").empty();
    var input = $(this).val();
    $(".filterPop").show();

    $.each($("#id_user option"), function() {
        var index = $(this).val();
        var val = $(this).text();
        if (val.toLowerCase().indexOf(input) >= 0) {
            newList += '<p class="lists"><button class="filteredList" data-filteredID="' + index + ' value="' + val + '">' + val + "</button></p>";
        }
    });

    $(".filterPop").append(newList);
});

我没有手动将input字段输入到html中，因为我的框架不允许它。

有人能给我一些额外的眼睛吗？

提前致谢。

Answer 1

您正在newList上与keyup联网。您需要在newList上清空keyup，然后在$.each()循环中连接。

var filterInput = '<input type="text" id="customFilter" placeholder="Filter" />';
var filterPopUp = '<div class="filterPop" style="border: 1px solid #000; min-height: 100px; min-width: 200px; display: none; position: fixed; left: 50%; top: 50%;"></div>';
$('#id_user').closest('.related-widget-wrapper').append(filterInput, filterPopUp);

$('#customFilter').on('keyup', function() {
  $('.filterPop').empty();
  var input = $(this).val();
  $('.filterPop').show();
  var newList = '';

  $.each($('#id_user option'), function() {
    var index = $(this).val();
    var val = $(this).text();
    if (val.toLowerCase().indexOf(input) >= 0) {
      newList += '<p class="lists"><button class="filteredList" data-filteredID="' + index + ' value="' + val + '">' + val + "</button></p>";
    }
  });

  ($('.filterPop').append(newList));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="related-widget-wrapper">
    <select id="id_user" name="user" required="">
        <option value="" selected="selected">---------</option>
        <option value="3">abc</option>
        <option value="1">admin</option>
        <option value="2">hello</option>
    </select>
</div>

Answer 2

而不是$（'＃customFilter'）。on（...）尝试$（filterInput）.on（...）。

当元素不是文档中的父级时，jquery将找不到它。

为什么我的孩子节点没有被清空？

2 个答案: