Question

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

我尝试了以下内容......

$("#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();
    }
  })
}

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

JQuery搜索栏没有正确隐藏Div

1 个答案: