CD-Media tagging: Commas versus spaces

[artdutra04]

Actually, how about (this will require a bit of AJAX coding) an auto-complete tagging field, like on Facebook. You start typing the tag, and it'll start narrowing down the choices. When the PHP script goes and keeps fetching the tags, you can do a str_replace() to remove spaces and invalid characters as they are entered, so typing frc 228 will show up as frc228.

Then they either click on the tag in the AJAX-dropdown box, or they can hit the enter button on the keyboard. If there was at least one related tag result, enter will add the top rated result. Otherwise if there are no new results, it will add whatever the user typed in as a tag. And if the user wants to add a tag that is the same as an existing tag but shorter, in the dropdown box add in an extra spot for the currently typed tag that does not count in the results.

Here's a screenshot of this exact same principle in action in the CMS I wrote for Team 228's website last year:




Going into details, the data for all the tags are you see with the "remove" boxes are stored in a single, space-deliminated hidden text area. When the user has a tag they want to enter, either by clicking on the tag or hitting the enter key, it calls a Javascript function with the tag to add. It reads the text area, explodes the string into an array, adds in the new tag into the array, then puts an imploded string back into the text field. At this time, it also goes through the array in a for loop, and rebuilds a <div> element using .innerHTML to show the tags as <span>'s floated left.

It took me like four or five hours to fully implement this tagging feature, and I'm a lot more of a mechanical guy than a CS guy.