Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stack Overflow style tagging system in jquery

I am wondering if there is a prebuilt clone (or very similar) to the Stack Overflow tagging system.

I have done some Googling however cannot find any powered by jquery.

like image 604
Hailwood Avatar asked Jan 20 '23 14:01

Hailwood


1 Answers

Here is my implementation (which I think is much more true to the SO style than is the accepted answer). The style may need tweaking but it's functionally the same as you see on SO.

Features:

  • Takes a predefined input field with words separated by commas -- perfect for all cases such as those in which you are editing an item that already has tags -- and builds the interactive tag editor from this information.

    example in rails format:

     <input id="post_tag_list" name="post[tag_list]" value='testing, test, probably, goose, under_score'/>
    
  • Updates a hidden input field as the user edits tags so that the submitted form will have all desired tags.

  • Deleting backwards through the (fake) tag input field is functionally the same as deleting one long string of words, making editing more natural.

  • Tags can be clicked on to edit.

  • Commas, spaces, returns, and tabs close an open tag that is being edited or created.

  • Close button on tags functions as expected.

  • etc.

Find it here: http://jsfiddle.net/bradleygriffith/axjKm/

like image 169
bradleygriffith Avatar answered Jan 30 '23 06:01

bradleygriffith