Highlight searched keyword using exposed filter views?

Question

In a view and I added an exposed filter: Search: Search Terms filter

It works fine, but I'd like to highlight the searched keyword in the results.

How can I do it?

Answer 1

You could use something like highlight that finds and adds a class to all instances of a word on the page, and instead of feeding it a static word, you would use the contents of the search box.

You can find more information and links to other versions in the StackOverflow question, Highlight a word with jQuery.

Answer 2

Using search_excerpt function you can highlight the searched keyword. It show the keyword in bold.

Returns snippets from a piece of text, with certain keywords highlighted. Used for formatting search results.

An example is shown below,

for eg: //a body field is exposed here

in your views tpl file add the following code

 <?php foreach ($rows as $id => $row): 

      $keys = $_GET['body_value'];
      $row = search_excerpt($keys, $row);
 ?>

it will highlight the searched word, see the screenshot below

Answer 3

If you are using views with Apache Solr with http://drupal.org/project/search_api and http://drupal.org/project/search_api_solr

You can enable highlighting on the word.

Answer 4

function custom_views_pre_render(&$view) {
  if ($view->name == 'article') {
    $result = $view->result;
    foreach ($result as $i => $row) {
      $body = $view->result[$i]->field_body[0]['rendered']['#markup'];
      $strong = $view->exposed_data['body_value'];
      $view->result[$i]->field_body[0]['rendered']['#markup'] = str_replace($strong, '<strong>' . $strong . '</strong>', $body);
    }
  }
}

Example for body field. Into your custom module.

Answer 5

You could use a javascript plugin like mark.js.

Here's an example with jQuery :

$('.view-content').mark($('input').val());