Attribute Pattern Matching

by bruth

HTML

<script src="https://raw.github.com/bruth/jquery.fn.search/master/jquery.fn.search.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<input type=text value=min>

<div>
    <img src=http://bruth.github.com/jquery.fn.search/docs/demos/chords/chord_amin95.gif data-search=Amin9>
    <img src=http://bruth.github.com/jquery.fn.search/docs/demos/chords/chord_amin96.gif data-search=Amin9>
    <img src=http://bruth.github.com/jquery.fn.search/docs/demos/chords/chord_asus2_open.gif data-search=Asus2>
    <img src=http://bruth.github.com/jquery.fn.search/docs/demos/chords/chord_b55.gif data-search=B5>
    <img src=http://bruth.github.com/jquery.fn.search/docs/demos/chords/chord_cmin95.gif data-search=Cmin9>
    <img src=http://bruth.github.com/jquery.fn.search/docs/demos/chords/chord_d7sus2_open.gif data-search=D7sus2>
    <img src=http://bruth.github.com/jquery.fn.search/docs/demos/chords/chord_dmaj7_open.gif data-search=Dmaj7>
    <img src=http://bruth.github.com/jquery.fn.search/docs/demos/chords/chord_e9_open.gif data-search=E9>
    <img src=http://bruth.github.com/jquery.fn.search/docs/demos/chords/chord_eb7sus45.gif data-search=Eb7sus4>
    <img src=http://bruth.github.com/jquery.fn.search/docs/demos/chords/chord_fmaj66.gif data-search=F6>
</div>

CSS

input { margin-bottom: 14px; }

JavaScript

var input = $('input'),
    imgs = $('img').search({
        effect: 'hide',
        filter: function(pattern, regexp) {
            var meta = $(this).data('search');
            return meta && meta.search(regexp) >= 0;
        }
    });
    
input.keyup(function() {
    imgs.search(input.val());
});
    
// trigger on load
input.keyup();