Highlight a cell value on search in jqGrid

Question

I have a jqGrid in which i need to integrate the search functionality for the complete grid. So the search text must be getting highlighted in the grid(one or many).

I have taken the search text in the grid, but not sure how to highlight the text.

//Code:

  $("#btnSearch").click(function () {

        var str = $("#txtSearch").val();
        if (str) {
            var rows = $("#jQGridDemo > tbody > tr:has(td:contains('" + str + "'))");
            $.each(rows, function (index, value) {

                 //Something like this
               // $(value).toggleClass('ui-state-highlight');

            });
        }
    });

The value contains the list of searched text. I have to highlight all those.

Probably [my old answer](http://stackoverflow.com/a/8505932/315935) do what you need. — Oleg, Aug 15 '14 at 17:13
@Oleg: Can you please look into this? http://stackoverflow.com/questions/25502333/both-image-and-select-formatter-in-jqgrid-column — A Coder, Aug 26 '14 at 09:26

score 0 · Answer 1 · answered Aug 12 '14 at 05:31

0

Try this,

$("#btnSearch").click(function () {
    var str = $("#txtSearch").val();
    if (str) {
        var rows = $("#jQGridDemo > tbody > tr:has(td:contains('" + str + "'))");
        $.each(rows, function (index, value) {
            $(value).html(
                  // highlight your text with class highlight
                  $(value).text().replace(str,'<span class="highlight">'+str+'</span>')
            );
        });
    }
});

answered Aug 12 '14 at 05:31

Rohan Kumar

40,431
11
76
106

No, this makes my cell alignment go away. Since it is replacing the class i believe. – A Coder Aug 12 '14 at 05:37

Doc Tuttles · Answer 2 · 2014-08-12T06:33:15.747

Look at the find() function in the jQuery API. It allows you to search all content (including tags so make sure you selector gets you to the td when searching) something like this.

$("#jQueryGrid td").find(searchStr).parent().each(function() {
//add highlighting class to $(this) here
});

If you have nested tr elements within other td elements or a different table structure than the most basic you'll have to change up your selector, but this gets the point across not having seen html or jQuery used to build the grid.

Also on highlighting just use use addClass() and removeClass() to control classes on the selected row. It will only remove or add the class you specify leaving other classes on the same element untouched. So, if you haven't already create a separate class for highlighting and just toggle it on and off as needed.

Highlight a cell value on search in jqGrid

2 Answers2