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.

May 21st, 2015 7:00pm

Hi,

As I understand, you want to get rid of the code snippet "strip off html tags".And when you just remove the code snippet, the search box cannot work.

Why do you want to get rid of the code snippet strip off html tags?

The function of the code snippet strip off html tags is to remove the code in the html code like < and> and remain the value of every column in the every row. Then if the value in the search box matches the value of the certain column in certain row. It will just display the row in the list.

If you just remove the code snippet, the search box will break. Because in the function DynamicFilter call the function stripHTML. If you have to remove the code snippet strip off html tags, the search box cannot filter the list correctly.

Best regards,

Sara Fan

Free Windows Admin Tool Kit Click here and download it now
May 24th, 2015 11:18pm

The script filters the lists perfectly fine, except when I add the "pictures with names column". When I use the jquery list filter when this column is added, the pictures and names go blank. It's very odd behavior. I had a hunch that removing this html tag would stop the script from filtering picture tags, where then it could properly display pictures/names while filtering. I don't know anything about jquery, so I was in hopes someone could tell me why it is filtering the picture column or how to stop it from doing it. 

First picture shows without typing anything in the filter search box jquery.

Second picture displays what I see when I begin typing in the filter box. As you can see the faculty column with "pictures and names" disappear.

May 25th, 2015 2:19pm

Hi,

As I understand, when filter the items with the script, the pictures with names column become blank.

What is the type of the picture with name column? Did you custom the list?

I have tested in my SharePoint 2010 environment. I added the script in the content edit web part, and added the Hyperlink or Picture column in the list, then added the pictures in the column. When I filter in the list, the items display correctly. The picture column is not blank.

You could create another list to do the same option to check if the situation will occur.

Best regards,

Sa

Free Windows Admin Tool Kit Click here and download it now
May 25th, 2015 10:31pm

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 4 hours 14 minutes ago
May 25th, 2015 11:22pm

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

Other recent topics Other recent topics