jquery/tag_complete/tag_complete.js

/*
        tag auto-completer written with jquery

        2006-08-18 Dobrica Pavlinusic <dpavlin@rot13.org>
*/

var _tag = {
        name: new Array(),
        obj: new Array(),
        selected: new Array(),
        entered: {                      // array of entered tags
                i: new Array(),         // offset to tags
                tag: new Array()        // mapping from tag i to entered
        },

        current: null,                  // current selected suggestion

        select: function( tag ) {

                $.log.info('filter '+tag);

                var j = 0;
                var tag_len = tag.length;
                var suggest = '';

                for(var i = 0; i < _tag.name.length; i++) {
                        var t = _tag.name[i];
                        if ( t.substr(0, tag_len) == tag ) {
                                $.log.debug('selected ['+i+']: ' + t );

                                jQuery.className.add( _tag.obj[i], 'selected' );

                                suggest += '<a href="#'+i+'" onclick="javascript:return _tag.tag(\'' + t + '\',' + i + ')">' + t + '</a> ';
                                _tag.selected[j++] = {
                                        i: i,
                                        obj: _tag.obj[i]
                                }
                        }
                }

                $('#suggest').html( suggest );
                if (j > 0) {
                        $('#suggest a:nth(0)').addClass('selected');
                        _tag.current = 0;
                }

        },

        clean_selected: function() {
                for(var i = 0; i < _tag.selected.length; i++) {
                        jQuery.className.remove( _tag.selected[i].obj, 'selected' );
                }

                var c = _tag.current;
                if (c == null) return c;

                $('#suggest').html('');
                _tag.current = null;

                return c;
        },


        take_suggested: function() {
                var c = _tag.current;
                if (c == null) {
                        $.log.debug('no current, return true');
                        return true;
                }

                var s = $('#suggest a:nth('+c+')').html();
                if (s == null) {
                        $.log.debug('no suggest, return true');
                        return true;
                }

                var i = _tag.selected[c].i;
                $.log.debug('take_suggested '+i+':'+s);
                _tag.add_tag( s, i );
                return false;
        },

        add_tag: function( t, i ) {
                $.log.info('add '+i+': '+t);
                _tag.focus();
                jQuery.className.add( _tag.obj[i], 'entered' );
                var entered_i = _tag.entered.i.length;
                _tag.entered.i[ entered_i ] = i;
                _tag.entered.tag[i] = entered_i;
                _tag.clean_selected();
                $('#tags').val(
                        $('#tags').val().replace(
                                /[^ ]*$/, t + ' '
                        )
                );
                return false;
        },

        remove_tag: function( t, i ) {
                $.log.info('remove '+i+': '+t);
                _tag.focus();
                jQuery.className.remove( _tag.obj[i], 'entered' );
                // remove selected tag and rebuild tags

                var ent_i = _tag.entered.tag[i];
                $.log.debug('entered i:'+ent_i);
                _tag.entered.i.splice(ent_i,1);
                _tag.entered.tag[i] = null;

                $.log.debug("tags "+_tag.entered.i.join(","));

                var tags = '';
                for (var j = 0; j < _tag.entered.i.length; j++) {
                        var tag_i = _tag.entered.i[j];
                        tags += _tag.name[ tag_i ] + ' ';
                        _tag.entered.tag[ tag_i ] = j;
                }

                _tag.clean_selected();
                $.log.debug('tags left: '+tags);
                $('#tags').val( tags );
                return false;
        },

        tag: function( t, i ) {
                if (_tag.entered.tag[i] != null) {
                        _tag.remove_tag( t, i );
                } else {
                        _tag.add_tag( t, i );
                }
        },

        move_suggested: function( where ) {
                var c = _tag.current;
                if (c == null) {
                        $.log.error('_tag.current is null');
                        return;
                }
                var to = c + where;
                $.log.info('move_suggested('+where+') '+c+' -> '+to);
                if (to < 0 || to >= _tag.selected.length) {
                        $.log.error('move to invalid element '+to);
                        return;
                }
                var s = '#suggest a:nth('+c+')';
                $( s ).removeClass('selected');
                $.log.debug('remove selected from '+s);
                s = '#suggest a:nth('+to+')';
                $( s ).addClass('selected');
                $.log.debug('add selected to '+s);
                _tag.current = to;
        },

        last_tag: function() {
                return $('#tags').val().replace(/^([^ ][^ ]* )*/, '');
        },
        focus: function() {
                // $('#tags').focus() doesn't work!
                document.getElementById('tags').focus();
        }

};

$(document).ready( function() {

        $('.tag').each( function(i) {
                var n = this.firstChild.nodeValue;
                _tag.name[i] = n;
                _tag.obj[i] = this;
                this.onclick = function() {
                        return _tag.tag( n, i );
                }
                this.href = '#'+i;      // FIXME debug
        });
        $.log.info( 'found ' + _tag.name.length + ' tags' );

        $.log.info( 'hook onchange to #tags_form' );
        $('#tags_form').keyup( function(e) {

                $.log.debug('keyup: '+e.keyCode);

                switch (e.keyCode) {
                        case 38:        // up
                                e.preventDefault();
                                _tag.move_suggested( -1 );
                                return false;
                        case 40:        // down
                                e.preventDefault();
                                _tag.move_suggested( +1 );
                                return false;
                        case 9:         // tab
                        case 13:        // return
                                if (_tag.current != null) _tag.focus();
                                e.preventDefault();
                                return false;
                }


                var t = _tag.last_tag();

                $.log.debug('tag: ' + t + ' ['+t.length+']');

                _tag.clean_selected();

                if (t == '') return false;

                _tag.select(t);

                $.log.info('selected ' + _tag.selected.length + ' tags');

                return true;
        }).submit( function() {
                $.log.debug('submit');
                return _tag.take_suggested();
        }).blur( function() {
                $.log.debug('blur');
                return _tag.take_suggested();
        });

        $.log.toggle();

        _tag.focus();
});

1	dpavlin	41	/*
2			tag auto-completer written with jquery
3
4			2006-08-18 Dobrica Pavlinusic <dpavlin@rot13.org>
5			*/
6
7			var _tag = {
8			name: new Array(),
9			obj: new Array(),
10	dpavlin	51	selected: new Array(),
11	dpavlin	52	entered: { // array of entered tags
12			i: new Array(), // offset to tags
13			tag: new Array() // mapping from tag i to entered
14			},
15	dpavlin	45
16	dpavlin	52	current: null, // current selected suggestion
17	dpavlin	51
18	dpavlin	45	select: function( tag ) {
19
20			$.log.info('filter '+tag);
21
22			var j = 0;
23			var tag_len = tag.length;
24	dpavlin	50	var suggest = '';
25	dpavlin	45
26			for(var i = 0; i < _tag.name.length; i++) {
27			var t = _tag.name[i];
28			if ( t.substr(0, tag_len) == tag ) {
29			$.log.debug('selected ['+i+']: ' + t );
30
31			jQuery.className.add( _tag.obj[i], 'selected' );
32
33	dpavlin	52	suggest += '<a href="#'+i+'" onclick="javascript:return _tag.tag(\'' + t + '\',' + i + ')">' + t + '</a> ';
34	dpavlin	51	_tag.selected[j++] = {
35			i: i,
36	dpavlin	52	obj: _tag.obj[i]
37	dpavlin	51	}
38	dpavlin	45	}
39			}
40
41			$('#suggest').html( suggest );
42			if (j > 0) {
43	dpavlin	50	$('#suggest a:nth(0)').addClass('selected');
44	dpavlin	45	_tag.current = 0;
45			}
46
47			},
48
49			clean_selected: function() {
50	dpavlin	51	for(var i = 0; i < _tag.selected.length; i++) {
51			jQuery.className.remove( _tag.selected[i].obj, 'selected' );
52	dpavlin	45	}
53
54			var c = _tag.current;
55	dpavlin	46	if (c == null) return c;
56	dpavlin	45
57			$('#suggest').html('');
58			_tag.current = null;
59	dpavlin	46
60			return c;
61	dpavlin	45	},
62
63
64			take_suggested: function() {
65	dpavlin	46	var c = _tag.current;
66			if (c == null) {
67			$.log.debug('no current, return true');
68			return true;
69			}
70
71	dpavlin	50	var s = $('#suggest a:nth('+c+')').html();
72	dpavlin	46	if (s == null) {
73			$.log.debug('no suggest, return true');
74			return true;
75			}
76
77	dpavlin	51	var i = _tag.selected[c].i;
78			$.log.debug('take_suggested '+i+':'+s);
79			_tag.add_tag( s, i );
80	dpavlin	48	return false;
81			},
82
83	dpavlin	51	add_tag: function( t, i ) {
84			$.log.info('add '+i+': '+t);
85			_tag.focus();
86			jQuery.className.add( _tag.obj[i], 'entered' );
87	dpavlin	52	var entered_i = _tag.entered.i.length;
88			_tag.entered.i[ entered_i ] = i;
89			_tag.entered.tag[i] = entered_i;
90	dpavlin	50	_tag.clean_selected();
91	dpavlin	45	$('#tags').val(
92			$('#tags').val().replace(
93	dpavlin	48	/[^ ]*$/, t + ' '
94	dpavlin	45	)
95			);
96	dpavlin	46	return false;
97	dpavlin	45	},
98
99	dpavlin	52	remove_tag: function( t, i ) {
100			$.log.info('remove '+i+': '+t);
101			_tag.focus();
102			jQuery.className.remove( _tag.obj[i], 'entered' );
103			// remove selected tag and rebuild tags
104
105			var ent_i = _tag.entered.tag[i];
106			$.log.debug('entered i:'+ent_i);
107			_tag.entered.i.splice(ent_i,1);
108			_tag.entered.tag[i] = null;
109
110			$.log.debug("tags "+_tag.entered.i.join(","));
111
112			var tags = '';
113			for (var j = 0; j < _tag.entered.i.length; j++) {
114			var tag_i = _tag.entered.i[j];
115			tags += _tag.name[ tag_i ] + ' ';
116			_tag.entered.tag[ tag_i ] = j;
117			}
118
119			_tag.clean_selected();
120			$.log.debug('tags left: '+tags);
121			$('#tags').val( tags );
122			return false;
123			},
124
125			tag: function( t, i ) {
126			if (_tag.entered.tag[i] != null) {
127			_tag.remove_tag( t, i );
128			} else {
129			_tag.add_tag( t, i );
130			}
131			},
132
133	dpavlin	45	move_suggested: function( where ) {
134			var c = _tag.current;
135			if (c == null) {
136			$.log.error('_tag.current is null');
137			return;
138			}
139			var to = c + where;
140			$.log.info('move_suggested('+where+') '+c+' -> '+to);
141	dpavlin	51	if (to < 0 \|\| to >= _tag.selected.length) {
142	dpavlin	45	$.log.error('move to invalid element '+to);
143			return;
144			}
145	dpavlin	50	var s = '#suggest a:nth('+c+')';
146	dpavlin	45	$( s ).removeClass('selected');
147			$.log.debug('remove selected from '+s);
148	dpavlin	50	s = '#suggest a:nth('+to+')';
149	dpavlin	45	$( s ).addClass('selected');
150			$.log.debug('add selected to '+s);
151			_tag.current = to;
152			},
153
154			last_tag: function() {
155			return $('#tags').val().replace(/^([^ ][^ ]* )*/, '');
156			},
157			focus: function() {
158			// $('#tags').focus() doesn't work!
159			document.getElementById('tags').focus();
160			}
161
162	dpavlin	41	};
163
164			$(document).ready( function() {
165
166			$('.tag').each( function(i) {
167	dpavlin	48	var n = this.firstChild.nodeValue;
168			_tag.name[i] = n;
169	dpavlin	41	_tag.obj[i] = this;
170	dpavlin	48	this.onclick = function() {
171	dpavlin	52	return _tag.tag( n, i );
172	dpavlin	48	}
173	dpavlin	52	this.href = '#'+i; // FIXME debug
174	dpavlin	41	});
175			$.log.info( 'found ' + _tag.name.length + ' tags' );
176
177			$.log.info( 'hook onchange to #tags_form' );
178	dpavlin	45	$('#tags_form').keyup( function(e) {
179	dpavlin	41
180	dpavlin	45	$.log.debug('keyup: '+e.keyCode);
181	dpavlin	41
182	dpavlin	45	switch (e.keyCode) {
183			case 38: // up
184			e.preventDefault();
185			_tag.move_suggested( -1 );
186			return false;
187			case 40: // down
188			e.preventDefault();
189			_tag.move_suggested( +1 );
190			return false;
191			case 9: // tab
192			case 13: // return
193	dpavlin	46	if (_tag.current != null) _tag.focus();
194	dpavlin	45	e.preventDefault();
195			return false;
196	dpavlin	41	}
197
198
199	dpavlin	45	var t = _tag.last_tag();
200	dpavlin	41
201	dpavlin	45	$.log.debug('tag: ' + t + ' ['+t.length+']');
202	dpavlin	41
203	dpavlin	45	_tag.clean_selected();
204	dpavlin	41
205	dpavlin	45	if (t == '') return false;
206
207			_tag.select(t);
208
209	dpavlin	51	$.log.info('selected ' + _tag.selected.length + ' tags');
210	dpavlin	45
211			return true;
212			}).submit( function() {
213			$.log.debug('submit');
214	dpavlin	46	return _tag.take_suggested();
215	dpavlin	45	}).blur( function() {
216			$.log.debug('blur');
217	dpavlin	46	return _tag.take_suggested();
218	dpavlin	45	});
219	dpavlin	41
220			$.log.toggle();
221
222	dpavlin	45	_tag.focus();
223	dpavlin	41	});
224