SharePoint JQuery List Filter Search Box Code

I want to get rid of the code 

//strip off html taqs
function stripHTML (field) {
    return field.replace(/<([^>]+)>/g,'');
}

within

<script type="text/javascript" src="/Scripts/jquery.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($){
    //attach a function to the keyup event on the filter box
    $('#filterInput').keyup(function() 
    {
        DynamicFilter($('#filterInput').val());
    });
})

//strip off html taqs
function stripHTML (field) {
    return field.replace(/<([^>]+)>/g,'');
}

function DynamicFilter(text)
{
    //find out list view (default class for a listview is "ms-listviewtable"
    $('table [class="ms-listviewtable"]').find('tr').each(function()
        {
            //don't filter out the header row
            if ($(this).attr("class") != "ms-viewheadertr ms-vhltr")
            {
                //get the html for the row and strip off the html tabs
                source = stripHTML($(this).html());
text = text.toLowerCase();
source = source.toLowerCase();
                
                //check to see if the filter text exists in the remaining text
                if (source.indexOf(text) < 0)
                {
                    //hide the row if it doesn't contain the text
                    $(this).hide();
                } else {
                    //otherwise show it
                    $(this).show();
                }
            }
        }
    );
}

</script>

<div id="mainDiv">
    <table>
        <tbody><tr>
            <td class="Filter" width="125px">Search: <input type="Text" id="filterInput"/></td>
        </tr>
    </tbody></table>
</div>
?

when I try to remove the code, the search box breaks, and no longer filters through the list (basically acts as a text box). How do I successfully remove that small bit of code, and keep this alive?

Note: I added this code into a content editor web part. It is currently working, but I can't make any changes to it otherwise it breaks.


  • Edited by -TR Wednesday, May 27, 2015 5:13 PM
May 21st, 2015 7:00pm

that's very strange. Could you possibly try to add more items to the list?

See photo. The field type is "Name with Picture"

In this second photo, I type the name of the faculty member. The name remains, but the picture always disappears.

  • Edited by -TR Tuesday, May 26, 2015 3:23 AM
Free Windows Admin Tool Kit Click here and download it now
May 26th, 2015 3:20am

Can anyone help?

The pictures are pulling from My Site on sharepoint.

They are JPEG images.

  • Edited by -TR Tuesday, May 26, 2015 2:18 PM
May 26th, 2015 2:17pm

Hi,

You could use other workarounds to achieve it.

1. You could change the people or group column to other type column such as Hyperlink or Picture column and go on searching by JQuery code.

2. If you dont want to change the people or group column, you could remove the JQuery code and switch to other method to achieve it.

There is a workaround, you could achieve it in SharePoint designer and follow the steps below:

1. Open the list view in SharePoint designer.

2. Add a text box control on the AllItem.aspx page. The text box control will have an ID property with the value of TextBox1.

3. Right click on the text box control and choose Properties. Set the AutoPostBack to True.

4. Click inside the list view web part, and choose Parameters in the ribbon.

5. Add a new parameter called Param1. Set the parameter source to Control . Set the Control ID to TextBox1.

6. Select the list view web part and add a filter for the list view web part. Set the filter like this: title equals Param1 or person equals Param1 and so on.

7. This can achieve your requirement. But there is a problem: no items will show up when the text box is empty. The solution here is to add a data form web part on the page instead. In the data form web part, you can add xslt filtering.

For more detailed information, you could refer to the case below.

https://social.technet.microsoft.com/Forums/sharepoint/en-US/0cfbffcc-992e-4602-a7d1-8ba09801a5df/filter-sharepoint-list-value-based-on-calculation-of-two-other-fields-in-infopath-form

The article below is about SharePoint Designer 2010 XSLT Filtering ( XSLT Filter ) in XSLT List View Web Parts.

http://blogs.microsoft.co.il/leonide/2011/03/21/sharepoint-designer-2010-xslt-filtering-xslt-filter-in-xslt-list-view-web-parts/

Best regards,

Sara Fan

Free Windows Admin Tool Kit Click here and download it now
June 2nd, 2015 10:25pm

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics