highlight

app/views/stores/search.html.erb

@@ -1,3 +1,18 @@
+<style type='text/css'>
+  .highlight {
+    background-color: #fff34d;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.7);
+    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.7);
+    box-shadow: 0px 1px 4px rgba(0,0,0,0.7);
+  }
+  .highlight {
+    padding: 1px 4px;
+    margin: 0 -4px;
+  }
+</style>
 <% content_for :top_field do%>
 	<div style="margin: 10px 5%;">
 		<%= form_tag( search_stores_path, method: 'post') do %>
@@ -32,3 +47,36 @@
 
 <% end %>
 <div class="pagination"><%= pagination_links_full @obj_pages, @obj_count, :per_page_links => false %></div>
+<script type='text/javascript'>
+  jQuery.fn.highlight = function(pat) {
+  function innerHighlight(node, pat) {
+    var skip = 0;
+    if (node.nodeType == 3) {
+      var pos = node.data.toUpperCase().indexOf(pat);
+      if (pos >= 0) {
+        var spannode = document.createElement('span');
+        spannode.className = 'highlight';
+        var middlebit = node.splitText(pos);
+        var endbit = middlebit.splitText(pat.length);
+        var middleclone = middlebit.cloneNode(true);
+        spannode.appendChild(middleclone);
+        middlebit.parentNode.replaceChild(spannode, middlebit);
+        skip = 1;
+      }
+    }
+    else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
+      for (var i = 0; i < node.childNodes.length; ++i) {
+        i += innerHighlight(node.childNodes[i], pat);
+      }
+    }
+    return skip;
+  }
+  return this.each(function() {
+    innerHighlight(this, pat.toUpperCase());
+  });
+};
+  $(document).ready(function($) {
+   $('.cb span').highlight('<%=params[:name]%>')
+   // $('#main').highlight('<%=params[:name]%>')
+  });
+</script>