Sharepoint 2013

Jul 29, 2013 at 10:00 AM
Does anyone have an idea how to get the InstantListFilter to work on SharePoint 2013 CEWP?

Thanks
Oct 15, 2014 at 12:41 PM
Hi,

Request anyone to please provide me the updated InstantList filter code for SharePoint 2013 list.

I have tried the provided code on the SharePoint 2013 list using CEWP but the search functionality is not working. not able to search any items from the list but its working on SharePoint 2007 and 2010 sites.

Really appreciate if anyone provide me the updated code for SharePoint 2013 as i have implemented this functionality on urgent basis on my client SharePoint 2013 site.

Thanks in Advance
Amit
Nov 19, 2014 at 2:24 PM
Same
Nov 24, 2014 at 1:04 PM
Edited Nov 24, 2014 at 1:09 PM
Here is a code that works on SP2013. Enjoy! :)

The plus sign seems to get into + Please replace when you use it

<script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script> 

<script type="text/javascript">

$(window).load(function () 
{ 

Load_Control(); 

function Load_Control () 
{
$("table.ms-listviewtable tr.ms-viewheadertr").each(function ()
{
    if ($("td.ms-vh-group", this).size() > 0) {
        return;
    }

    var tdset = "";

    var colIndex = 0;

    $(this).children("th,td").each(function () {
        if ($(this).hasClass("ms-vh-icon")) {
            // attachment
            tdset += "<td></td>";
        }
        else {
            // filterable
            tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";

        }

        colIndex++;
    });
    //alert("tdset" + tdset);
    var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";

    $(tr).insertAfter(this);
});
};



$("input.vossers-filterfield")
    .css("border", "1px solid #7f9db9")
    .css("width", "100%")
    .css("margin", "2px")
    .css("padding", "2px")
  
    .keyup(function () {
        var inputClosure = this;
        if (window.VossersFilterTimeoutHandle)
        {
            clearTimeout(window.VossersFilterTimeoutHandle);
        }

        window.VossersFilterTimeoutHandle = setTimeout(function ()
        {

            var filterValues = new Array();

            $("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function () {
                if ($(this).val() != "") {
                    filterValues[$(this).attr("filtercolindex")] = $(this).val();
                }
            });


            $("table.ms-listviewtable").children("tbody").each(function () {
                $(this).children("tr").each(function () {

                    var mismatch = false;

                    $(this).children("td").each(function (colIndex) {
                        if (mismatch) return;

                        if (filterValues[colIndex]) {
                            var val = filterValues[colIndex];

                            // replace double quote character with 2 instances of itself
                            val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));

                            // verifies the filter word.
                            if ($(this).is(":not(:contains('" + val + "'))")) {
                                mismatch = true;

                            }

                        }
                    });

                    if (mismatch) {
                        $(this).hide();
                    }
                    else {
                        $(this).show();
                    }
                });

            });

        }, 250);
    });
}); 


</script> 
Feb 4, 2015 at 4:07 PM
I am unable to get this code to work...what do you mean by "The plus sign seems to get into + Please replace when you use it"
THanks
Feb 13, 2015 at 10:27 AM
Hello,
i got it to run in SharePoint 2013 but now I have another problem. Is there any way to get it to work in the quick edit view?
I tried it but it looks strange but I have no idea to fix it. Any suggestions?

Regards
Michael
Aug 17, 2015 at 7:39 PM
Got this to work on SP2013 now. Since the tables have been changed for a list view, you have to modify the following line:

$(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()

needs to be changed to

$(inputClosure).closest(".ms-listviewtable").find("tbody tr").nextAll("tr").each(function() {

I'm also using JQuery 1.9.1 by the way if it makes any difference.
Aug 26, 2015 at 3:40 PM
Chanwise, thx for your work here but can you post please full code, above is a bit confusing
Nov 17, 2015 at 5:42 PM
This worked great for me. Thanks! I'm trying to figure out how to modify it though in order to make it case insensitive.
Thanks!
Apr 5, 2016 at 8:16 PM
malabarka wrote:
Chanwise, thx for your work here but can you post please full code, above is a bit confusing
I didn't my notifications turned on...came back here to refer back to my own post smh ;-)

Posting my full code that works on SP2013
$(document).ready(function()
{   
    jQuery.extend(jQuery.expr[':'], {
        containsIgnoreCase: function(a,i,m) {return (a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0}
     });

    $("table.ms-listviewtable tr.ms-viewheadertr").each(function()
    {
        if($("td.ms-vh-group", this).size() > 0)
        {
            return; 
        }
        
        var tdset = "";
        
        var colIndex = 0;
        
        $(this).children("th,td").each(function()
        {
            if($(this).hasClass("ms-vh-icon"))
            {
                // attachment
                tdset += "<td></td>";
            }
            else
            {
                // filterable
                tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";                
            }
            
            colIndex++;
        });
        
        var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";
        
        $(tr).insertAfter(this);
    }); 
    
    
    $("input.vossers-filterfield")
        .css("border", "1px solid #7f9db9")
        .css("width", "100%")
        .css("margin", "2px")
        .css("padding", "2px")
        .keyup(function()
        {           
            var inputClosure = this;
            
            if(window.VossersFilterTimeoutHandle)
            {
                clearTimeout(window.VossersFilterTimeoutHandle);
            }
            
            window.VossersFilterTimeoutHandle = setTimeout(function()
            {
                var filterValues = new Array();
                
                $("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function()
                {               
                    if($(this).val() != "")             
                    {
                        filterValues[$(this).attr("filtercolindex")] = $(this).val();
                    }
                });     
                
                            
                $(inputClosure).closest(".ms-listviewtable").find("tbody tr").nextAll("tr").each(function()
                {
                    var mismatch = false;
                    
                    $(this).children("td").each(function(colIndex)
                    {
                        if(mismatch) return;
                        
                        if(filterValues[colIndex])
                        {
                            var val = filterValues[colIndex];
                            
                            // replace double quote character with 2 instances of itself
                            val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));                         
                                                                                
                            if($(this).is(":not(:containsIgnoreCase('" + val + "'))"))
                            {
                                mismatch = true;
                            }                       
                        }
                    });
                    
                    if(mismatch)
                    {
                        $(this).hide();
                    }
                    else
                    {
                        $(this).show();
                    }       
                });             
                
            }, 250);
        });
});
Apr 5, 2016 at 8:21 PM
crashcarr wrote:
This worked great for me. Thanks! I'm trying to figure out how to modify it though in order to make it case insensitive.
Thanks!
It should already be case insensitive, i believe.
Apr 25, 2016 at 2:45 PM
Edited Apr 25, 2016 at 2:46 PM
Can you please post the full code starting with <script src.... and ending with </script>?
Apr 25, 2016 at 11:24 PM
That is the full code besides declaring your jQuery reference.
Apr 26, 2016 at 7:00 AM
Edited Apr 26, 2016 at 2:47 PM
Ok. I got it to work, but it doesn't take the first item in the filter. The top item is always there no matter what I put in the searchfield.
Jun 17, 2016 at 4:07 PM
I'm running into the same issue. It will filter everything perfectly other than the first item entered in the list. that item will always show
Aug 9, 2016 at 9:51 PM
Thanks. Very much appreciated
Oct 28, 2016 at 10:03 PM
Thank you, this code works great. But, it works on the current page where you can have a limit of 100 items, is there a way to make it to work but taking the whole list where you can have 400 items?
Jan 30 at 8:17 PM
Hi all,

The code below is chanwise's code, however, I have fixed the problem with the top item always showing up. The problem was with the jQuery selector .nextAll(). This selector only selects all the next elements and doesn't include the first one. I have fixed this by adding .andself().

This is the complete code so you can copy and paste it into SharePoint 2013.


Thanks!

Lawrence L.
<script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>

<script>
    $(document).ready(function() {
        jQuery.extend(jQuery.expr[':'], {
            containsIgnoreCase: function(a, i, m) {
                return (a.textContent || a.innerText || jQuery(a).text() || '').toLowerCase().indexOf((m[3] || '').toLowerCase()) >= 0
            }
        });

        $("table.ms-listviewtable tr.ms-viewheadertr").each(function() {
            if ($("td.ms-vh-group", this).size() > 0) {
                return;
            }

            var tdset = "";

            var colIndex = 0;

            $(this).children("th,td").each(function() {
                if ($(this).hasClass("ms-vh-icon")) {
                    // attachment
                    tdset += "<td></td>";
                } else {
                    // filterable
                    tdset += "<td style='padding-right: 7px;'><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";
                }

                colIndex++;
            });

            var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";

            $(tr).insertAfter(this);
        });


        $("input.vossers-filterfield")
            .css("border", "1px solid #7f9db9")
            .css("width", "100%")
            .css("margin", "2px")
            .css("padding", "2px")
            .keyup(function() {
                var inputClosure = this;

                if (window.VossersFilterTimeoutHandle) {
                    clearTimeout(window.VossersFilterTimeoutHandle);
                }

                window.VossersFilterTimeoutHandle = setTimeout(function() {
                    var filterValues = new Array();

                    $("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function() {
                        if ($(this).val() != "") {
                            filterValues[$(this).attr("filtercolindex")] = $(this).val();
                        }
                    });


                     $(inputClosure).closest(".ms-listviewtable").find("tbody tr").nextAll("tr").andSelf().each(function() {
                        var mismatch = false;

                        $(this).children("td").each(function(colIndex) {
                            if (mismatch) return;

                            if (filterValues[colIndex]) {
                                var val = filterValues[colIndex];

                                // replace double quote character with 2 instances of itself
                                val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));

                                if ($(this).is(":not(:containsIgnoreCase('" + val + "'))")) {
                                    mismatch = true;
                                }
                            }
                        });

                        if (mismatch) {
                            $(this).hide();
                        } else {
                            $(this).show();
                        }
                    });

                }, 250);
            });
    });
</script>