Question

我正在将这个特定主题用于我的项目，目前正在使用聊天功能。

Chat API beta有一个输入框，基本上可用于过滤用户，但只是一个虚拟。我给它一个chat-filter的id，并在jquery中使用此代码来过滤聊天中的用户：

$('#chat-filter').on('input', null, null, function(e){
    $('.display-users a').filter(function(){
        return $(this).data('chatFname') != $('#chat-filter').val();
    }).hide();
});

在更改输入字段时，我选择聊天中的所有用户并通过自定义功能对其进行过滤。我现在只是想通过chatFname数据属性来过滤它，但我不确定我做错了什么并且它无法正常工作。

但我真正想要的是根据所有数据属性过滤用户，即将所有数据属性与输入匹配，这样如果有人想按照他们的角色过滤用户，那也是有效的。我做错了什么，我怎么能做到这一点？

Answer 1

您不应该使用'keyup'或'keypress'或'change'代替'input'吗？

此外，您应该在其他元素上调用show()，否则，如果它们被之前的输入隐藏，则它们将永远不再显示。

$('#chat-filter').on('keyup', function(e){
    var filterValue = $('#chat-filter').val();
    $('.display-users a').show()
    .filter(function(){
        return $(this).data('chatFname') != filterValue;
    }).hide();
});

然后，您可以添加其他支票：

$('#chat-filter').on('keyup', function(e){
    //toLowerCase() so it is case insensitive
    var filterValue = $('#chat-filter').val().toLowerCase();
    $('.display-users a').show()
    .filter(function(){
        //looks for filterValue inside chatFname using String.indexOf
        //toLowerCase() so it is case insensitive
        if ($(this).data('chatFname').toLowerCase().indexOf(filterValue) !== -1) {
            return false;
        }
        //filter returns list of roles that contain the filterValue string
        //then we test length to check whether we found any roles
        //again, toLowerCase() so it is case insensitive
        if ($(this).data('chatRoles').filter(function (role) { return role.toLowerCase().indexOf(filterValue) !== -1; } ).length) {
            return false;
        }
        [...]
        return true;
    }).hide();
});

Answer 2

这是一个使用正则表达式匹配过滤元素的简单示例

$('#filter').keyup(function () {

            var rex = new RegExp($(this).val(), 'i');
            $('.searchable tr').hide();
            $('.searchable tr').filter(function () {
                return rex.test($(this).attr("data-chatFname"));
            }).show();

        })

http://jsfiddle.net/52aK9/790/

使用数据属性和输入过滤元素？

2 个答案: