Blog

Simple mysql search with rails and jquery.highlight

Simple mysql search with rails and jquery.highlight

I re-designed my whole website a few month ago and now I added one more key feature - a search for my blog. My blog is not as big, as maybe others are, so I decided to create a normal mysql search. I shortly thought about integrating a solution with solr, like the sunspot_rails gem, but then I thought that is to much and I simple chose mysql. Btw Ryan Bates did a very nice railscasts about the sunspot rails gem. Just check it out here: [LINK]

You can imagine how the search works with mysql already? I think so, but will give you a short overview for better understanding. I simple build a form in the views and an action in my controller. A little method in my posts model handles the querying.


# posts_controller.rb
def index
  if params[:search]
    @posts = Post.search(params[:search])
  else
    # somtething else ..
  end
end

# “.search” is my class method in the posts model, which handles the querying

I think that's easy so far. Now I will show you how you can implement an highlighting for your search. I have done this with jquery. I integrated the jquery.highlight plugin. You can find it here: [LINK]

I coded two little javascript functions. The first one is for rendering the highlights in nearly real time. If an user types in a search word, it will highlight the potential results automatically. The code looks like following snippet:


function realtimeHighlightText() {
  var self = this;
  self.input = $("#search").select().focus();
  self.performSearch = function() {
    var phrase = $("#search").val();
    if (phrase.length < 2) { return; }
      $('.your-div-which-contains-the-content').highlight(phrase);
    };
    
    self.search;
    self.input.keyup(function(e) {
      $('.your-div-which-contains-the-content ').removeHighlight();
      if (self.search) { clearTimeout(self.search); }
      self.search = setTimeout(self.performSearch, 300);
    });
}

The second function is for rendering the highlights after an user submits a search word. For example she/he fills in the search form with “Rails” and further submits the query, all results will be displayed on the monitor, and all matches with the search word “Rails” in the result posts contents will be highlighted. The code looks like the following few lines:


function highlightText() {
  var phrase = $("#search").val();
  if (phrase.length > 0) {
     $('.your-div-which-contains-the-content ').highlight(phrase);
  }
}

Now you just have to put some styles for “. your-div-which-contains-the-content” in one of your css files. An example for that could be:

# your-css.css
. your-div-which-contains-the-content {
  background-color: yellow;
  color: #000;
}

And you are done and will have a simple mysql search with highlights for search terms.

16.03.2012
Matthias Frick
Ruby on Rails, JavaScript
1 Kommentar

Über den Autor

Matthias Frick
Matthias Frick, MSc.

Er ist ein langjähriger Ruby-on-Rails Entwickler und leitet das Unternehmen Frick-Web.

1 Kommentar zu "Simple mysql search with rails and jquery.highlight"

  1. Jack Crunch
    Jack Crunch 12.01.2013
    Nice post! Helped me a lot! Thx!

Kommentar verfassen