www.webdeveloper.com
Results 1 to 3 of 3

Thread: Text Highlighting Help

  1. #1
    Join Date
    Apr 2013
    Posts
    2

    Text Highlighting Help

    I have an HTML table that is dynamically built and populated with data from a database. I want to incorporate a text search on the page so that when a user types a search term every term within a DIV that wraps the table is highlighted on a character-by-character basis.

    Conversely, as the user deletes characters from the input search field, the highlights are recalculated to omit the deleted characters.

    I have a script that I found online that works, but in some cases it inserts " " and "&" strings as I type in the input box and I cannot for the life of me figure out why.

    Any pointers, code samples, links, etc. are appreciated.


    Thanks for reading!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    Why ask for help if you don't show us the code that is giving you problems?

  3. #3
    Join Date
    Apr 2013
    Posts
    2

    Re:

    I forgot to add it, sorry.

    I found this online and for the most part, it works, however sometimes for some reason it inserts " " when entering a search term and "&" when I hit the delete key.

    Code:
    function filterTable(Stxt, table) {
         dehighlight(document.getElementById(table));
         if (Stxt.value.length > 0)
           highlight(Stxt.value.toLowerCase(), document.getElementById(table));
      }
      
      function dehighlight(container) {
         for (var i = 0; i < container.childNodes.length; i++) {
           var node = container.childNodes[i];
           if (node.attributes && node.attributes['class'] && node.attributes['class'].value == 'highlighted') {
               node.parentNode.parentNode.replaceChild(
               document.createTextNode(node.parentNode.innerHTML.replace(/<[^>]+>/g, "")),node.parentNode);
               return;
           } else if (node.nodeType != 3) {
               dehighlight(node);
           }
         }
      }
    
      function highlight(Stxt, container) {
        for (var i = 0; i < container.childNodes.length; i++) {
            var node = container.childNodes[i];
            if (node.nodeType == 3) {
                var data = node.data;
                var data_low = data.toLowerCase();
                if (data_low.indexOf(Stxt) >= 0) {
                    var new_node = document.createElement('span');
                    node.parentNode.replaceChild(new_node, node);
                    var result;
                    while ((result = data_low.indexOf(Stxt)) != -1) {
                        new_node.appendChild(document.createTextNode(data.substr(0, result)));
                        new_node.appendChild(create_node(
                        document.createTextNode(data.substr(result, Stxt.length))));
                        data = data.substr(result + Stxt.length);
                        data_low = data_low.substr(result + Stxt.length);
                    }
                    new_node.appendChild(document.createTextNode(data));
                }
            } else {
                highlight(Stxt, node);
            }
        }
      }
    
      function create_node(child) {
        var node = document.createElement('span');
        node.setAttribute('class', 'highlighted');
        node.attributes['class'].value = 'highlighted';
        node.appendChild(child);
        return node;
      }

    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles