Search SharePoint list or library using Jquery

By -



 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.


Comments

  1. ultragcJune 8, 2012 at 1:44 AM

    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. premtdJune 11, 2012 at 5:22 PM

    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

Post a Comment

Popular posts from this blog

How to copy SharePoint list workflow

By -
Image
We often face a situation where we need to copy a big workflow from list or library to another list or library. This situation can be avoided if we have created the workflow as reusable workflow. So in this article I will explain in simple steps on how to copy a list workflow to another workflow using SharePoint designer. Using this method we can copy workflow across site collections are web applications.

For this we have the following List Name Workflow Name List 1 List Workflow 1 List 2 List Workflow 2 (Copied from the worlflow1)
Step 1) We have the list 1 with list workflow 1 to be copied to list workflow 2.
Step 2) Now create a list workflow 2 , in list 2 with one condition plus once activity and save it. In our example I have used a condition and sending email to current user. This is used to create the Xoml rules for the list workflow 2

Step 3) Now in the side of navigation click All Files

Step 4) In all files click the Workflows

Step 5) Open the List workflow 1 and also repeat t…
Read more

Generate Auto number Field in SharePoint list

By -
Image
Generate Auto number Field in SharePoint list
To create auto generated list field do the following 1.Create a column field with data type number in the targeted list. For example I am creating an auto generated column Case ID.

2.Now to make the auto generated column hidden when a new item is created in the list we have to hide it in content types.
First go to list settings-> Then in General settings go to Advanced Settings


3.In Advanced settings Click the radio button Yes , in Allow management of content types .And Click OK.


4.Now go to list settings again and a new Content types will be shown. In that click the Content type. In my case it is Item. Name may vary for you.


5.In that Content type all list columns will be shown. In that click the Case ID Column.




6.After  that click the Hidden and then click OK
7.Then open SharePoint Designer create a new workflow for the list when a new item is created
8.And add update action to the list.
9.Click Add .In set this field value select Case ID
Read more

INFOPATH FORM HIDE/DISABLE FIELDS BASED ON SHAREPOINT GROUP MEMBERSHIP

By -
Image
Hi guys in this tutorial you will get to know how to identify whether a user is part of a Share point group in InfoPath form.

NOTE:
This will work only for WINDOWS AUTHENTICATED SP sites
In this example we will use the logged in persons user name is in IT SP group. If he is in the IT SP group we will enable Submit Button and If he is not in the IT SP group we will enable Submit to IT button.
STEP 1:
Go to the SP site. Go to People and groups and create a group IT. And Add users to the group.





Added test user 1 in the SP group.


STEP 2:
Open the InfoPath 2010.

Created 3 fields Name, Emp ID, Department and 2 Buttons Submit to IT and Submit


STEP 3:
Go to the Data tab and select Data Connections





Add a Data Connection






















Read more