CODEWITHSUNDEEP
jqueryhighlight
mohamad mohamad
mohamad mohamad

Reputation: 631

jquery highlight search text in table

I use below code to highlight text in a table this code work fine but i have a problem that is sensitive for capital and small letter

example: if i do a search on a word like test

if i put a capital Test or TEST i can't found the word only if i put test like that i found the word

How can i solve this problem ??

I want if i put a capital or small letter the word be highlighted.

This the code:

(function () {
var removeHighlight = function () {
    $('span.highlight').contents().unwrap();
};

var wrapContent = function (index, $el, text) {
    var $highlight = $('<span class="highlight"/>')
        .text(text.substring(0, index));
    //console.log(text.substring(0, index));
    var normalText = document.createTextNode(text.substring(index, text.length));
    //console.log(index, $highlight.text(), normalText);
    $el.html($highlight).append(normalText);
};

var highlightTextInTable = function ($tableElements, searchText) {
    // highlights if text found (during typing)
    var matched = false;
    //remove spans
    removeHighlight();

    $.each($tableElements, function (index, item) {
        var $el = $(item);
        if ($el.text().search(searchText) != -1 && !matched) {
            //console.log("matched", $el, $el.html());
            wrapContent(searchText.length, $el, $el.html());
            //console.log(searchText, $el.text());
            if (searchText.toLowerCase() == $el.text().toLowerCase()) {
                // found the entry
                //console.log("matched");
                matched = true;
            }
        }
    });
};

$(function () {
    //load table into object
    var $tableRows = $('table td');
    var $tableElements = $tableRows.children();

    console.log($tableRows, $tableElements);

    $('#search').on('keyup', function (e) {
        var searchText = $(this).val();

        if (searchText.length == 0) {
            // catches false triggers with empty input (e.g. backspace delete or case lock switch would trigger the function)
            removeHighlight(); // remove last remaining highlight
            return;
        }
        //findTextInTable($tableElements, searchText);

        highlightTextInTable($tableElements, searchText);

    });
});

})();

Upvotes: 2

Views: 4459

Answers (2)

Rahul
Rahul

Reputation: 2474

Using toLowerCase() you can achieve it :

if (searchText.toLowerCase() == $el.text().toLowerCase()) {
    // found the entry
   // console.log("matched");
   matched = true;
}

Upvotes: 1

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

Use toLowerCase() anc change like below:-

if ($el.text().toLowerCase().search(searchText.toLowerCase()) != -1 && !matched) {
    //console.log("matched", $el, $el.html());
    wrapContent(searchText.length, $el, $el.html());
    console.log($el.text().toLowerCase());
    if (searchText.toLowerCase() == $el.text().toLowerCase()) {
        // found the entry
        //console.log("matched");
        matched = true;
    }
}

Workinf fiddle:- https://jsfiddle.net/c612ak5d/

Upvotes: 1

Related Questions