Refactor two jQuery filter functions into one function I have two separate lists both sitting side by side. How can I refactor the code below to only have one filter function for both lists? 

$("input.filterInput").keyup(function() {
    filter(this); 
});

function filter(element) {
    var value = $(element).val();
    $(".pdfList &gt; li").each(function (){
        if ($(this).text().indexOf(value) &gt; -1) {
                $(this).show();
        } else {
            $(this).hide();
        }
    });
}

$("input.filterInput2").keyup(function() {
    filter2(this); 
});

function filter2(element) {
    var value = $(element).val();
    $(".pdfList2 &gt; li").each(function (){
        if ($(this).text().indexOf(value) &gt; -1) {
                $(this).show();
        } else {
            $(this).hide();
        }
    });
}
You'll have the following two inputs in your HTML.

&lt;input id="filterInput1" /&gt;
&lt;input id="filterInput2" /&gt;


Then you can wire them both up together, or split it into separate assignments:

$('#filterInput1, #filterInput2').each(function () {
    $(this).keyup(function () {
        filter(this);
    });
});


Finally, check the ID of the element that triggered the function call to see what list you should be trying to highlight:

function filter(element) {
    var value = $(element).val(),
        selector;

    if (element.id === 'filterInput1') {
        selector = '.pdfList';
    } else if (element.id === 'filterInput2') {
        selector = '.pdfList2';
    } else {
        return; // Or throw an error, whatever you feel is more appropriate.
    }

    // Now the dropdown selector is stored in the variable, and will change which
    // it is looking at depending on who called it.
    $(selector + " &gt; li").each(function (){
        if ($(this).text().indexOf(value) &gt; -1) {
                $(this).show();
        } else {
            $(this).hide();
        }
    });
}