Filter for div elements using data-* attribute only works for case sensitive search

I am trying to create a search filter for a set of cards. Each card has a data-pname attribute and I am using the value of this attribute for my filter.

Problem: The current code is unable to match "facebook" with data-name=Facebook or "messenger" with data-pname=Messenger.

Code Snippet:

var addon_search = document.createElement('input');
$(addon_search).on('keyup', function() {
    var value = $(this).val();
    $('[data-pname]').hide();
    if (value.length < 1) {
        $('[data-pname]').show();
    }
    $('[data-pname*=' + value + ']').each(function() {
        $(this).show();
    });
});