4

I have written a javaScript file in jQuery that provides a search function. I am trying to figure out how to highlight the word aswell. Bellow is the code.

Filter.js:

(function ($) {
  // custom css expression for a case-insensitive contains()
  jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});


function listFilter(header, list, title) { 
   // header is any element, list is an unordered list, title is any element
   // create and add the filter form to the header
   // create a button for collapse/expand to the title

var form = $("<form>").attr({"class":"filterform","action":"#"}),
    button = $("<input>").attr({"class":"rest", "type":"submit", "value":"Collapse All", "id":"switch"}),
    input = $("<input>").attr({"class":"filterinput","type":"text", "placeholder":"Search"});

$(form).append(input).appendTo(header); //add form to header
$(title).append(button); //add button to title

 //on click function for collapse/expand all
$("#switch").click(function(){
    if($(this).val() == "Collapse All"){
        $(".filterinput").val("");
        $(this).val("Expand All");
        $("div.content div.markdown").parent().parentsUntil(list).hide();
        $(list).find("span.path").parentsUntil(list).show();
        $(list).find("ul.endpoints").css("display", "none");
    }
    else{
        $(".filterinput").val("");
        $(this).val("Collapse All");
        $("div.content div.markdown").parent().parentsUntil(list).hide();
        $(list).find("span.path").parentsUntil(list).show();
    }
});

$(input)
  .change( function () {
    var filter = $(this).val();
    if(filter) {
      // this finds a single string literal in div.markdown,
      // and hides the ones not containing the input while showing the ones that do
        $(list).find("div.content div.markdown:not(:Contains(" + filter + "))").parent().parentsUntil(list).hide();
        $(list).find("div.content div.markdown:Contains(" + filter + ")").parent().parentsUntil(list).show();
    } 
    else {
        $("div.content div.markdown").parent().parentsUntil(list).hide();
        $(list).find("span.path").parentsUntil(list).show();
        $(list).find("ul.endpoints").css("display", "none");
    }
    return false;
  })
.keyup( function () {
    // fire the above change event after every letter
    $(this).change();
});
}
   //ondomready
   setTimeout(function () {
    listFilter($("#header"), $("#resources"), $("#api_info"));
   }, 250);
}(jQuery));

The html that I would like to manipulate is being dynamically created by another JS file so I need to manipulate the DOM after it has been completely rendered.. The html that I will be focusing on gets rendered as bellow, specifially the words in (div class="markdown").

Index.html:

<div class="content" id="connectivitypacks_get_connectivitypacks_content">
    <h4>Description</h4>
    <div class="markdown"><p>Response will return details for the connectivity packs based on the ID.</p>
        <h2 id="keywords">Keywords</h2>
        <p> foo, bar, helloWorld, java</p>
    </div>
</div>
Zack Herbert
  • 942
  • 1
  • 16
  • 39
  • Seems this is already answered here: http://stackoverflow.com/questions/119441/highlight-a-word-with-jquery – Persijn Jul 23 '15 at 17:51
  • @Persijn I have looked at this post. I have tried to cater some of the code to work in my specific program, but I'm having trouble with it. I figured I would post this inorder to have a more specific answer to how my code is already – Zack Herbert Jul 23 '15 at 17:53

2 Answers2

4

Here is an example that used your markdown.

  1. Create a regex with that word your searching for.
  2. Get the html of your .markdown
  3. replace the word with <span class="marker">"+ word +"</span>. So this creates a span tag around the word your searching for.
  4. Create css to style the word as needed.

function highlight(word) {
  var element = $('.markdown');
  var rgxp = new RegExp(word, 'g');
  var repl = '<span class="marker">' + word + '</span>';
  element.html(element.html().replace(word, repl));

}

highlight('details');
.marker {
  background-color: yellow;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content" id="connectivitypacks_get_connectivitypacks_content">
  <h4>Description</h4>
  <div class="markdown">
    <p>Response will return details for the connectivity packs based on the ID.</p>
    <h2 id="keywords">Keywords</h2>
    <p>foo, bar, helloWorld, java</p>
  </div>
</div>
Persijn
  • 14,624
  • 3
  • 43
  • 72
  • Ok, thanks this is a nice starting point. I need it to work on a keyup though so that as the user is typing into the search bar it will begin highlighting the word. Here is a [Fiddle](https://jsfiddle.net/btjqd1ed/) to help you see what I mean. As you start typing in a word it only highlights the first character. Then once you backspace to clear the search bar some html gets injected as text. Any ideas? – Zack Herbert Jul 23 '15 at 19:50
  • 1
    Here is an updated version of the [Fiddle](https://jsfiddle.net/btjqd1ed/1/). It is working with the search bar now, but there is a nasty little bug. I will warn you, type only two letters in the search bar and you will se what I mean. If you type anymore it will crash your browser. – Zack Herbert Jul 23 '15 at 20:35
1

Have a look at mark.js. It can highlight such search terms in a specific context. In your example the JavaScript would look like:

var searchTerm = $("#theInput").val();

// Search for the search term in your context
$("div.markdown").mark(searchTerm, {
    "element": "span",
    "className": "highlight"
});

and the CSS part:

span.highlight{
    background: yellow;
}
dude
  • 5,678
  • 11
  • 54
  • 81