jQuery搜索栏未正确隐藏Divs

Question

我有一个设置，其中<user-panel>元素是通过ng-repeat创建的。该元素的孩子是 user-panel-name类。我一直在尝试使用名称中包含的文本来过滤页面上的结果，以获取输入框的值。

我已经尝试了以下...

$("#user-search-input").on('keyup', function () {
    var search = $(this).val().toLowerCase();
    console.log(search);
    $(".user-panel").show().filter(function () {
        return $(this).find('user-panel-name').text().toLowerCase().indexOf(search) < 0;
    }).hide();
});

这个根本没有运行。

我更改了被称为onkeyup的方法。

function SearchUsers(e){
    var search = $(e).val().toLowerCase();
    console.log(search);
    $(".user-panel").show().filter(function () {
    return $(".user-panel").find('user-panel-name').text().toLowerCase().indexOf(search) < 0;
    }).hide();
}

第二种方法运行良好，但一直在隐藏所有元素。有人知道我出错了哪里吗？

谢谢。

Answer 1

我设法通过实现关注函数来解决我的问题。

function searchUsers(e){
  var search = $(e).val().toLowerCase();
  $(".user-panel").each(function (){
    if ($(this).find('.user-panel-name').text().toLowerCase().indexOf(search) < 0){
      $(this).hide();
    }else {
      $(this).show();
    }
  })
}

我不确定我的原始实现如何或为什么我的原始实现无法正常工作，但是经过几次划痕，我采用了这种方法。