2010-01-08 16 views
6

Ich habe einige div's in meiner Seite (Build mit PHP + Jquery) und ich möchte sie nach ihren Attributen filtern (wenn es mehr als 1 Attributfilterung gibt, dann wird es die Suche). Die div's wie folgt aussehen:Mehrere Filter mit Jquery

<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> 

Dann habe ich eine Form, die div's zu filtern Attribute:

<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> 

Nun Ive alredy den größten Teil des JQuery Teil getan und der Filter arbeitet ---> Aber ich möchte die Suche einzuengen, wenn wurde leider mehr als 1 Filterung Attribut, um es zu verketten NICHT, und das ist was noch passiert mit meinem Code Gebrüll:

$("#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; 
}); 

Ive versucht, in

filtros +=",[analista='"+filtroAnalista+"']"; 

Aber es nicht funktioniert "& &" statt "" zu verwenden.

irgendwelche Ideen?

PS: Sorry für mein schlechtes Englisch, ich bin brasilianisch :)

Antwort

8

Sie sollten den Filter() Funktion:

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

In Ihr Beispiel:

$("#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; 
}); 
+0

Idiotische Frage (Ich weiß, also vergib mir im Voraus): Die Filterfunktion funktioniert andersherum, also wäre die var filteredList die div's, die ich zeigen möchte, oder? Also würde ich es hier einfach ersetzen? $ ("# solicitacoes> div: not (" + filtros + ")"). Hide(); >> $ ("# solicitacoes> div: not (" + gefilterteListe + ")"). Hide(); –

+0

Danke Philippe !!!!!!!!!!!!!! –

+0

@ Philippe - Ich habe Ihnen einen Punkt für Ihre Antwort gegeben, weil ich seit Monaten nach einer Lösung für dasselbe Problem gesucht habe! Vielen Dank! – dac

2

entfernen Sie einfach das Komma.

Also statt:

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

Verwenden

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

Sie möchten Ihre Abfrage resultierenden wie folgt aussehen:

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

Auch die Art und Weise Sie nennen es isn‘ t es richtig filtern. Dies ist, wie ich Ihre Funktion ändern würde, damit es funktioniert (Sie einen working demo des Codes sehen können und play 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; 
}); 
+0

Hummm ... versuchte Ive dies, aber es es auch verkettete ... –

+0

@Let ich meine Antwort aktualisiert ... sorry nicht die Verwendung von 'not' bemerkt haben das erste Mal durch. Ich fügte auch eine funktionierende Demo des fertigen Codes mit JSBin hinzu. –

+0

Danke Doug ... beide Lösungen funktionieren gut! –

1

den Namen des auf jedem Element Attribut Put und die Lösung wird dynamischer, es muss nur die „Daten-Form“ -Attribut die richtigen Elemente wählen:

$("#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