webworka/Tagedit — Issue #23: improvements suggestions
Author: drenty
Created: 2012-01-14 14:29:09+00:00
State: open

I've tweaked Tagedit a little bit for my own needs, here is what I came with:

New features:
- tag number cap
- tag length limit
- input validation through a regex
- optional class to .tagedit-list when the input text field is focused (so you can mimic an input field with a css :focus selector)

Bug fix:
- deep extend prevents breakKeyCodes to be overriden

What could be done:
- make the tag cap / length limit optional
- add a way of sending error/info messages (by passing a selector in options for instance)
- indentation needs some clean-up

I have other improvements in my mind, but it needs more thinking. Tell me what you think!

Here is the diff with the version I'm using on my project:

```diff
1c1
< /*
---
> ﻿/*
52c52
<	options = $.extend(true, {
---
>	options = $.extend({
62a63,67
>	// additions
>	maxTags: 10,
>	maxLength: 30,
>	focusClass: null,
>	validationRule: '^[a-zA-Z0-9-_]+$',
98a104,105
>	var tagNumber = 0;
>
99a107
>	var tagRegexp = new RegExp(options.validationRule);
126a135,140
>	if (tagNumber >= options.maxTags) {
>	alert("Maximum element number reached (" + options.maxTags + ")");
>	} else {
>	tagNumber++;
>	}
>
152c166
<	html += '';
---
>	html += '';
163c177
<	// Event ist triggert in case of choosing an item from the autocomplete, or finish the input
---
>	// Event triggered when picking an item from the autocomplete list, or finishing the input
177a192,203
>	var tagString = $(this).val().replace(/\s{2,}/g, ' ');
>
>	if ((tagNumber >= options.maxTags) ||
>	(tagString === ' ') ||
>	(tagRegexp.test(tagString) === false))
>	{
>	$(this).val('');
>	return;
>	}
>
>	tagNumber++;
>
180c206
<	html += '' + $(this).val() + '';
---
>	html += '' + tagString + '';
182c208
<	html += '';
---
>	html += '';
202a229,230
>	if (tagNumber > 0) tagNumber--;
>
251a280,289
>	})
>	.focusin(function() {
>	if (options.focusClass != null) {
>	$('.tagedit-list').addClass(options.focusClass);
>	}
>	})
>	.focusout(function() {
>	if (options.focusClass != null) {
>	$('.tagedit-list').removeClass(options.focusClass);
>	}
253d290
<
261a299,300
>	tagNumber--;
>
412c451
<	if(elementValue == compareValue) {
---
>	if(elementValue === compareValue) {