2
\$\begingroup\$

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 > li").each(function (){
        if ($(this).text().indexOf(value) > -1) {
                $(this).show();
        } else {
            $(this).hide();
        }
    });
}

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

function filter2(element) {
    var value = $(element).val();
    $(".pdfList2 > li").each(function (){
        if ($(this).text().indexOf(value) > -1) {
                $(this).show();
        } else {
            $(this).hide();
        }
    });
}
\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

You'll have the following two inputs in your HTML.

<input id="filterInput1" />
<input id="filterInput2" />

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 + " > li").each(function (){
        if ($(this).text().indexOf(value) > -1) {
                $(this).show();
        } else {
            $(this).hide();
        }
    });
}
\$\endgroup\$
9
  • \$\begingroup\$ I tried that. It filters both independent lists at the same time... \$\endgroup\$
    – Joel
    Feb 23, 2015 at 17:46
  • \$\begingroup\$ Yeah, I just went back and took another look and realized. Give me a minute. \$\endgroup\$
    – krillgar
    Feb 23, 2015 at 17:47
  • \$\begingroup\$ There ya go. Additional checks can (and probably should) be done to make sure that the element has the filterInput2 class, but that's added easily enough. \$\endgroup\$
    – krillgar
    Feb 23, 2015 at 17:50
  • \$\begingroup\$ would i keep each input tag as having its own class? or would .filterInput be assigned to both input tags? \$\endgroup\$
    – Joel
    Feb 23, 2015 at 17:54
  • 1
    \$\begingroup\$ im just using them to distinguish between input fields. I should probably make them ids \$\endgroup\$
    – Joel
    Feb 23, 2015 at 17:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.