filter list using SPServices

Question

I have a list with the following fields (Title, Area, Zone, Reference, qtt). I created two "select" tags for the area and zone fields. I also created an "input" tag for filter field reference. I am using spservices and CAML to filter items in the page list. How do I change the list of the current page with the result obtained by CAML and SPServices.

My code ht

<script type="text/javascript">

    $(document).ready(function () { 
       $("#row").empty();  
       $("#row").append("<div id='areadiv' class='col-md-3'></div>");
        $("#areadiv").append("<b>Área:</b><select title='areabox' id='areaid' class='form-control'><option value='Empty'>Empty</option></select>");
       $("#row").append("<div id='zonadiv' class='col-md-3'></div>");
       $("#zonadiv").append("<b>Zona:</b><select title='zonabox' id='zonaid' class='form-control'><option value='Empty'>Empty</option></select>");       
       $("#row").append("<div id='artigoid' class='col-md-4'></div>");
       $("#artigoid").append("<b>Artigo:</b><input id='textartigo' class='form-control'></input>");
       $('#textartigo').val('');
       $("#row").append("<div id='btndiv' class='col-md-2'></div>");
       $("#btndiv").append("<button type='button' class='btn btn-success'>Pesquisar</button>");

       createarea();
       createzona();
       $("button").click(function(){ 
          var sda_filterquery='';
          var cb1=$('#areaid').val();
          var cb2=$('#zonaid').val()
          var txtval=$('#textartigo').val();
          if(cb1=='Empty' && cb2=='Empty' && txtval=='')
          {
           alert("Não selecionou nenhum valor para pesquisar");
           contador=0
          }
          else {
            var contador=0;
            if (cb1!='Empty')
             contador++;
            if (cb2!='Empty')
             contador++;
            if (txtval!='')
              contador++;  
          }
          if (contador>=2)
          {
              if (cb1!='Empty')
              {
                 if (cb2!='Empty')
                 {
                    sda_filterquery="<Query><Where><And><Eq><FieldRef Name='Area' /><Value Type='Choice'>"+cb1+"</Value></Eq><Eq><FieldRef Name='Zona' /><Value Type='Choice'>"+cb2+"</Value></Eq></And></Where></Query>"; 
                 }
                 else
                 {
                    sda_filterquery="<Query><Where><And><Eq><FieldRef Name='Area' /><Value Type='Choice'>"+cb1+"</Value></Eq><Contains><FieldRef Name='DescArtigo' /><Value Type='Text'>"+txtval+"</Value> </Contains></And></Where></Query>"; 
                 }
              }
              else{
                 if (cb2!='Empty')
                 {
                      if (cb1!='Empty')
                      {
                        sda_filterquery="<Query><Where><And><Eq><FieldRef Name='Area' /><Value Type='Choice'>"+cb1+"</Value></Eq><Eq><FieldRef Name='Zona' /><Value Type='Choice'>"+cb2+"</Value></Eq></and></Where></Query>"; 
                       }
                      else
                       {
                        sda_filterquery="<Query><Where><and><Eq><FieldRef Name='Zona' /><Value Type='Choice'>"+cb2+"</Value></Eq><Contains><FieldRef Name='DescArtigo' /><Value Type='Text'>"+txtval+"</Value></Contains></And></Where></Query>"; 
                        }
                 }
                 else
                 {
                   if (cb1!='Empty')
                      {
                       sda_filterquery="<Query><Where><and><Eq><FieldRef Name='Area' /><Value Type='Choice'>"+cb1+"</Value></Eq><Eq><FieldRef Name='Area' /><Value Type='Text'>"+txtval+"</Value></Eq></and></Where></Query>";  
                      }
                      else
                       {
                        sda_filterquery="<Query><Where><And><Eq><FieldRef Name='Zona' /><Value Type='Choice'>"+cb2+"</Value></Eq><Contains><FieldRef Name='DescArtigo' /><Value Type='Text'>"+txtval+"</Value></Contains></And></Where></Query>"; 
                        }
                }
              }

          }
          else
          {
            if (contador==1)
            {
               if (cb1!='Empty')
                 sda_filterquery="<Query><Where><Eq><FieldRef Name='Area' /><Value Type='Choice'>"+cb1+"</Value></Eq></Where></Query>";
               if (cb2!='Empty')    
                 sda_filterquery="<Query><Where><Eq><FieldRef Name='Zona' /><Value Type='Choice'>"+cb2+"</Value></Eq></Where></Query>";
               if(txtval!='')
                 sda_filterquery="<Query><Where><Contains><FieldRef Name='DescArtigo' /><Value Type='Text'>"+txtval+"</Value></Contains></Where></Query>";
            } 

          }

         //-----------------------------
         var sda_viewfields="<ViewFields><FieldRef Name='Title' /><FieldRef Name='Area' /><FieldRef Name='Zona' /><FieldRef Name='Quantidade' /><FieldRef Name='DescArtigo' /></ViewFields>";
                          // operation: "GetListItems", 







            $().SPServices({
              operation: "GetListItems",
             listName: "Localização Material",
             async: false,
             CAMLQuery:sda_filterquery,
             CAMLViewFields:sda_viewfields,               
             completefunc: function (xData,Status) {

                   $(xData.responseXML).SPFilterNode("z:row").each(function() {
                        alert(Status);     
                         if(Status == 'success' )
                         {

                             var liHtml = "<li>" + $(this).attr("ows_Area") + "</li>";
                             $("#tasksUL").append(liHtml);

                         }    
                    }); // each                 

             },
             debug:true
          });




        //--------------------
       })    

    })   


   function createarea()
   {
      $().SPServices({
            operation: "GetListItems",
            async: false,
            listName: "Area",
              completefunc: function (xData, Status) {
                   if(Status == 'success' )
                   {

                       $(xData.responseXML).SPFilterNode("z:row").each(function() {
                          var text = $(this).attr("ows_Title");
                         $("select[title='areabox']").append($('<option>text</option>').val(text).html(text));             

                       });
                   }
           }
      });
   }
function createzona()
   {
      $().SPServices({
            //operation: "GetListItems",
             operation: "GetListItems",       
            async: false,
            listName: "Zona",
              completefunc: function (xData, Status) {
                   if(Status == 'success' )
                   {

                       $(xData.responseXML).SPFilterNode("z:row").each(function() {
                          var text = $(this).attr("ows_Title");
                         $("select[title='zonabox']").append($('<option>text</option>').val(text).html(text));             

                       });
                   }
           }
      });
   }

</script>

Answer 1

There is no direct way of doing this.but you can use some jQuery hacks to update the list items based on your filter condition.

and the hack is:

First, you have to update your list view which you want to display , in the list view make "ID" column's order 1st and save the view.

Now with your jQuery add below code in your button click event,

    apQuery("#contentBox").find('tr.ms-itmhover > :nth-child(2)').each(function(){ 
    var itemsArray = //make array of your items id retrived from SPService ex. ["2","3"];
    var tempId = apQuery(this).text();
         if(itemsArray.indexOf(tempId) == -1)
         {
         apQuery(this).closest('tr').hide();
         }
    }); 

This way you can hide the items from the view and on clear filter button make all rows visible again by following code :

    apQuery("#contentBox").find('tr.ms-itmhover').show();