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

Question

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

聊天 API 测试版有一个输入框，基本上可以用来过滤用户，但它只是一个虚拟输入框。我给它一个 ID chat-filter 并在 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/

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

Filtering elements using data attributes and input?

jquery

filter

custom-data-attribute