Shaun Mccran

My digital playground

01
F
E
B
2012

Dynamically tagging content with Keywords using JQuery

I've used a ticketing system called Lighthouse App for a while now, and one of the features I really like about it is its ability to tag content with keywords in a very easy and obvious fashion.

If you have ever wanted to tag an article or some content with a list of Keywords then this blog article is for you.

The idea with this functionality is that we are going to enable users with the ability to tag content with chosen keywords. We will give them a list of keywords and they will be able to simply click on any of them, and they will be added to a form field that is associated with the content they are concerned with.

view plain print about
1<h3>Keywords</h3>
2<input class="keyword-seed" type="text" name="keywords" value="" size="50">
3
4<div class="existing-keyword-holder" id="existing-keyword-holder">
5    Existing keywords<br>
6    <a href="javascript:void(0);">Chalk</a>
7    <a href="javascript:void(0);">Cheese</a>
8    <a href="javascript:void(0);">Potatoes</a>
9</div>
10
11<s/cript>
12    //this will apply to all anchor tags in the keywordlink div
13    $('div#existing-keyword-holder a).click(function()
14        {
15
16    linkvalue = $(this).attr('text');
17    $(this).effect("highlight", {}, 3000);
18    $('.keyword-seed').val($('.keyword-seed').val()+ linkvalue + ' ');
19    })
20</script>

The Code

All I am doing here is using JQuery to intercept all the hyperlinks within the 'existing-keyword-holder' div and picking up their value and inserting it into the form field (with an added space character). You could make this comma separated if you like. I've also added a basic highlight / fade effect to jazz it up a little.

The keywords a user can select from will initially be populated from a query. When a user submits the list I'll check it server side to see if they have added any new keywords manually. If they have then these will be added to the master list, in this way we are keeping things up-to-date, and the new keywords will appear in the main list when the page next loads.

There is an example of this working here:

Dynamically adding keywords to a field using JQuery

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
James Moberg's Gravatar I've been looking for ways to improve the UI on a feature that uses a comma-delimited list of tags. We use them on everything from blog posts to products and use Ajax to autosuggest tags as the user is typing.

I've used this in the past and it's quite flexible:
http://code.drewwilson.com/entry/autosuggest-jquer...

I'm considering using this, but I haven't decided yet:
http://textextjs.com/
# Posted By James Moberg | 01/02/12 18:48
itunes codes's Gravatar So i am happy to see the itunes gift card,free itunes codes generator now available here .if you want to play get this link. http://itunesgiftcardcodesfree.com/
# Posted By itunes codes | 12/11/15 19:04
Ramesh Kumar's Gravatar Thanks for post this helpful post - Please visit for More information about -
Best Packers and Movers Mumbai @
http://www.expert5th.in/packers-and-movers-mumbai/...
Best Packers and Movers Pune @
http://www.expert5th.in/packers-and-movers-pune/
Best Packers and Movers Hyderabad @
http://www.expert5th.in/packers-and-movers-hyderab...
# Posted By Ramesh Kumar | 25/11/15 02:09
Packers and Movers Bangalore's Gravatar This article is really fantastic and thanks for sharing the valuable post.
Best Packers and Movers Gurgaon @
http://www.expert5th.in/packers-and-movers-gurgaon/" target="_blank">http://www.expert5th.in/packers-and-movers-gurgaon...
Best Packers and Movers Delhi @
http://www.expert5th.in/packers-and-movers-delhi/" target="_blank">http://www.expert5th.in/packers-and-movers-delhi/
Best Packers and Movers Noida @
http://www.expert5th.in/packers-and-movers-noida/
Best Packers and Movers Bangalore @
http://www.expert5th.in/packers-and-movers-bangalore/" target="_blank">http://www.expert5th.in/packers-and-movers-bangalo...
Best Packers and Movers India @
http://www.expert5th.in/
# Posted By Packers and Movers Bangalore | 25/11/15 02:09
Packers and Movers Pune's Gravatar Thanks for all your information, Website is very nice and informative content.
Best Packers and Movers Chennai @
http://www.expert5th.in/packers-and-movers-chennai...
Best Packers and Movers Thane @
http://www.expert5th.in/packers-and-movers-thane/
Best Packers and Movers Navi Mumbai @
http://www.expert5th.in/packers-and-movers-navimum...
Best Packers and Movers Ghaziabad @
http://www.expert5th.in/packers-and-movers-ghaziab...
Best Packers and Movers Faridabad @
http://www.expert5th.in/packers-and-movers-faridab...
# Posted By Packers and Movers Pune | 25/11/15 02:10
Packers and Movers Hyderabad's Gravatar Thanks for post this helpful post - Please visit for More information about -
Best Packers and Movers Bangalore #
http://www.expert5th.in/packers-and-movers-bangalo...
Best Packers and Movers Pune #
http://www.expert5th.in/packers-and-movers-pune/
# Posted By Packers and Movers Hyderabad | 25/11/15 02:11
Kamilla's Gravatar Its a good post..keep posting and update the information.selfie stick....
http://192168ll.org/
# Posted By Kamilla | 23/12/15 03:59
Back to top