使用Jquery的多个过滤器

时间:2010-01-08 18:39:11

标签: jquery filtering

我的页面中有一些div(使用php + jquery构建)并且我想根据它们的属性过滤它们(如果有超过1个属性过滤,那么它将缩小搜索范围)。 div看起来像这样:

<div id="solicitacoes">
    <div id='1' title='Mike' status='18' analista='23'>Whatever content 1</div>
    <div id='2' title='John' status='16' analista='46'>Whatever content 2</div>
    <div id='3' title='Tom' status='2' analista='49'>Whatever content 3</div>
    <div id='4' title='Mike' status='4' analista='23'>Whatever content 4</div>
    <div id='5' title='Kate' status='3' analista='32'>Whatever content 5</div>
    <div id='6' title='Steve' status='1' analista='14'>Whatever content 6</div>
</div>

然后,我有一个表单来过滤div的属性:

<div id="filtros">
<form id="filtroSolicitacoes" type="post" name="filtroSolicitacoes">
Protocolo: <input type="text" name="filtroProtocolo" id="filtroProtocolo" size="5"/>
Solicitante: <input type="text" name="filtroSolicitante" id="filtroSolicitante" size="10"/>
Status: 
<select name="filtroStatus" id="filtroStatus">
<option value="0">-- Selecione Status--</option>
<option value="3">Aguardando Aprova&ccedil;&atilde;o</option>
<option value="18">Encaminhado</option>
<option value="2">Iniciado</option>
<option value="1">N&atilde;o Iniciado</option>
<option value="4">Pendente de Esclarecimento</option>
<option value="16">Reiniciado</option>
<option value="6">Reprovado</option>
</select>
Analista: 
<select name="filtroAnalista" id="filtroAnalista">
    <option value="23">Robert</option>
    <option value="46">Allan</option>
    <option value="49">Edward</option>
    <option value="32">Jake</option>
    <option value="14">Stella</option>
</select>
<button type="submit" id="filtrar" style="float:right; margin-right:10px">:: Filtrar ::</button>
</form>
</div>

现在,我已经完成了大部分Jquery部分并且过滤器正在工作---&gt;但如果有超过1个过滤属性,我想要搜索搜索,不要连接它,这就是我的代码发生的事情  波纹管:

$("#filtroSolicitacoes").submit(function() {
    $("#solicitacoes > div").show();
    var filtroProtocolo = $("#filtroProtocolo").val();
    var filtroSolicitante = $("#filtroSolicitante").val().toUpperCase();
    var filtroStatus = $("#filtroStatus").val();
    var filtroAnalista = $("#filtroAnalista").val();
    var filtroResultado = $("#filtroResultado:checked").length;

    var filtros = "[id=filtros]";

    if(filtroStatus !== "0"){
        filtros +=",[status='"+filtroStatus+"']";
    }
    if(filtroProtocolo !== ""){
        filtros +=",[id='"+filtroProtocolo+"']";
    }
    if(filtroSolicitante !== ""){
        filtros +=",[title*='"+filtroSolicitante+"']";
    }
    if(filtroAnalista !== "0"){
        filtros +=",[analista='"+filtroAnalista+"']";
    }

    if(filtros !== "[id=filtros]"){
        $("#solicitacoes > div:not("+filtros+")").hide();
    }
    return false;
});

我曾尝试使用“&amp;&amp;”

而不是“,”
filtros +=",[analista='"+filtroAnalista+"']";

但它不起作用。

任何想法?

PS:对不起,我的英语很差,我是巴西人:)

3 个答案:

答案 0 :(得分:8)

你应该使用filter()函数:

var filteredList = elements
                      .filter("[status=status1]")
                      .filter("[title*=something]");
// and so on

在你的例子中:

$("#filtroSolicitacoes").submit(function() {
    $("#solicitacoes > div").show();
    var filtroProtocolo = $("#filtroProtocolo").val();
    var filtroSolicitante = $("#filtroSolicitante").val().toUpperCase();
    var filtroStatus = $("#filtroStatus").val();
    var filtroAnalista = $("#filtroAnalista").val();
    var filtroResultado = $("#filtroResultado:checked").length;

    var elements = $("[id=filtros]");

    if(filtroStatus !== "0"){
        elements = elements.filter("[status='"+filtroStatus+"']");
    }
    if(filtroProtocolo !== ""){
        elements = elements.filter("[id='"+filtroProtocolo+"']");
    }

    // and so on

    $("#solicitatcoes > div").not(elements).hide();

    return false;
});

答案 1 :(得分:4)

只需删除逗号即可。

所以而不是:

filtros +=",[status='"+filtroStatus+"']";

使用

filtros +="[status='"+filtroStatus+"']";

您希望生成的查询如下所示:

"[status=status][title*='whatever']"

此外,您调用它的方式不是正确过滤它。这就是我改变你的功能以使其工作的方式(你可以查看代码的working demoplay with it.):

$("#filtroSolicitacoes").submit(function() {
    var filtroProtocolo = $("#filtroProtocolo").val();
    var filtroSolicitante = $("#filtroSolicitante").val().toUpperCase();
    var filtroStatus = $("#filtroStatus").val();
    var filtroAnalista = $("#filtroAnalista").val();
    var filtroResultado = $("#filtroResultado:checked").length;

    var filtros = "";

    if(filtroStatus !== "0"){
        filtros +="[status='"+filtroStatus+"']";
    }
    if(filtroProtocolo !== ""){
        filtros +="[id='"+filtroProtocolo+"']";
    }
    if(filtroSolicitante !== ""){
        filtros +="[title*='"+filtroSolicitante+"']";
    }
    if(filtroAnalista !== "0"){
        filtros +="[analista='"+filtroAnalista+"']";
    }

    if(filtros !== ""){
        $("#solicitacoes > div").hide().filter(filtros).show();
    } else {
        $("#solicitacoes > div").show();
    }
    return false;
});

答案 2 :(得分:1)

在每个元素上放置属性的名称,解决方案将更加动态,只需要“data-form”属性来选择正确的元素:

$("#filtroSolicitacoes").on("submit", function(){

    $("#solicitacoes div").show();

    var filter = "";

    $(this).find("[data-form]").each(function(){

        if( $(this).val() != "" ) filter += ("[" + $(this).attr("data-form") + "='" + $(this).val() + "']");

    });

    if(filter.length > 0) $("#solicitacoes div").not(filter).hide();

    return false;

});

jsfiddle