Keywordize.js jQuery Plugin

Posted on

Hey Guys, I know its been a while since I have posted on here but, hey… I have been busy! Anyways, I have been hard at work on personal projects and some other work that I have been really enjoying.

For a project I am working on, I was required to implement a dynamic keyword generator for a body of text. I began searching for a similar plugin, which I did find one, but it cost money and I didn’t want to spend money on something I could make myself. Also, I hope that all of you will be able to contribute to it since it is open source and I’m giving back to the community – you should too!

Keywordize.js jQuery Plugin

Keywordize Documentation

Keywordize Github Repository

To begin, start by including the plugin files into your project like so:

Screen Shot 2013-12-27 at 2.38.40 PM

After you include the scripts into your site, you’ll want to fill up your page with text, preferably in paragraphs. The plugin will need a dictionary of terms to search for in your paragraphs. I’ll show you that below.

Screen Shot 2013-12-27 at 2.44.20 PM

All this is, is an array of objects with a keyword and definition key. Pass this keyword dictionary to the plugin like so:

Screen Shot 2013-12-27 at 2.48.03 PM

If you can see, I have attached the plugin to the 'body p' tags. I have more more to say about that in a minute. But in each paragraph tag, it will search for the keywords in your dictionary and wrap them in an anchor tag (will allow for more customization on this front in the near future). The anchor tag gets a class of (for now) .tooltip. You can then attach any other tooltip plugins to these anchors. In my demo, I chose to use the semantic-ui popup module for my tooltip functionality.

Keywordize.js Preview

popup