June 7, 2012

// // 2 comments

Search SharePoint list or library using Jquery




 In this post I will be detailing on how to achieve the search inside a SharePoint list or document library using jquery in simple steps.

Step 1)
Download these two files from the below link
Click here to download jquery.min.js
Click here to download jsapi.js

Step 2)
Upload these two files in your SharePoint site’s document library.




Step 3)
Now go to the list or library where search functionality needs to be added.
And Click Site settings > Edit Page
In the SP ribbon click on Insert > web Part
In the categories of webpart select Media and content
In webparts select Content Editor webpart and Click Add finally.



Step 4)
Click on the Content Editor webpart and in the ribbon its properties are added.  
Under format Text > Click HTML and click Edit HTML Source, a modal box opens up.



Step 5)
Add the following code in the HTML source modal box and click OK.

<script src="YOUR SITE LINK TO jsapi.js"></script>

<script>


google.load("jquery", "1.2.6");

google.setOnLoadCallback(function() {

$(document).ready(function()
{              
                jQuery.extend(jQuery.expr[':'], {
                  containsIgnoreCase: "(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).parents("tr.vossers-filterrow").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);
                                });
});

});

</script>
<script src="YOUR SITE LINK TO jquery.min.js" type="text/javascript"></script>


Step 6)
Replace YOUR SITE LINK TO with the link of the files uploaded in your document library.

Step 7)
Now a text box will be present over every column in the list, where you can search.


2 comments:

  1. Nice write up. This code currently returns result from only the current view page (with 30 items listed). It does not return results from the rest of the list. Can this be achieved?

    ReplyDelete
  2. Hi,

    I dont know how to do for searching entire list, if its in the next page ( I mean after 30 items). But as a turnaround u can increase the item limit so that u search the entire list.

    ReplyDelete