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(),

        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="#" onclick="javascript:return _tag.add_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' );
                _tag.clean_selected();
                $('#tags').val(
                        $('#tags').val().replace(
                                /[^ ]*$/, t + ' '
                        )
                );
                return false;
        },

        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.add_tag( n, i );
                }
        });
        $.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	45
12	dpavlin	51	current: null, // current selected suggestion
13
14	dpavlin	45	select: function( tag ) {
15
16			$.log.info('filter '+tag);
17
18			var j = 0;
19			var tag_len = tag.length;
20	dpavlin	50	var suggest = '';
21	dpavlin	45
22			for(var i = 0; i < _tag.name.length; i++) {
23			var t = _tag.name[i];
24			if ( t.substr(0, tag_len) == tag ) {
25			$.log.debug('selected ['+i+']: ' + t );
26
27			jQuery.className.add( _tag.obj[i], 'selected' );
28
29	dpavlin	51	suggest += '<a href="#" onclick="javascript:return _tag.add_tag(\'' + t + '\',' + i + ')">' + t + '</a> ';
30			_tag.selected[j++] = {
31			i: i,
32			obj: _tag.obj[i],
33			}
34	dpavlin	45	}
35			}
36
37			$('#suggest').html( suggest );
38			if (j > 0) {
39	dpavlin	50	$('#suggest a:nth(0)').addClass('selected');
40	dpavlin	45	_tag.current = 0;
41			}
42
43			},
44
45			clean_selected: function() {
46	dpavlin	51	for(var i = 0; i < _tag.selected.length; i++) {
47			jQuery.className.remove( _tag.selected[i].obj, 'selected' );
48	dpavlin	45	}
49
50			var c = _tag.current;
51	dpavlin	46	if (c == null) return c;
52	dpavlin	45
53			$('#suggest').html('');
54			_tag.current = null;
55	dpavlin	46
56			return c;
57	dpavlin	45	},
58
59
60			take_suggested: function() {
61	dpavlin	46	var c = _tag.current;
62			if (c == null) {
63			$.log.debug('no current, return true');
64			return true;
65			}
66
67	dpavlin	50	var s = $('#suggest a:nth('+c+')').html();
68	dpavlin	46	if (s == null) {
69			$.log.debug('no suggest, return true');
70			return true;
71			}
72
73	dpavlin	51	var i = _tag.selected[c].i;
74			$.log.debug('take_suggested '+i+':'+s);
75			_tag.add_tag( s, i );
76	dpavlin	48	return false;
77			},
78
79	dpavlin	51	add_tag: function( t, i ) {
80			$.log.info('add '+i+': '+t);
81			_tag.focus();
82			jQuery.className.add( _tag.obj[i], 'entered' );
83	dpavlin	50	_tag.clean_selected();
84	dpavlin	45	$('#tags').val(
85			$('#tags').val().replace(
86	dpavlin	48	/[^ ]*$/, t + ' '
87	dpavlin	45	)
88			);
89	dpavlin	46	return false;
90	dpavlin	45	},
91
92			move_suggested: function( where ) {
93			var c = _tag.current;
94			if (c == null) {
95			$.log.error('_tag.current is null');
96			return;
97			}
98			var to = c + where;
99			$.log.info('move_suggested('+where+') '+c+' -> '+to);
100	dpavlin	51	if (to < 0 \|\| to >= _tag.selected.length) {
101	dpavlin	45	$.log.error('move to invalid element '+to);
102			return;
103			}
104	dpavlin	50	var s = '#suggest a:nth('+c+')';
105	dpavlin	45	$( s ).removeClass('selected');
106			$.log.debug('remove selected from '+s);
107	dpavlin	50	s = '#suggest a:nth('+to+')';
108	dpavlin	45	$( s ).addClass('selected');
109			$.log.debug('add selected to '+s);
110			_tag.current = to;
111			},
112
113			last_tag: function() {
114			return $('#tags').val().replace(/^([^ ][^ ]* )*/, '');
115			},
116			focus: function() {
117			// $('#tags').focus() doesn't work!
118			document.getElementById('tags').focus();
119			}
120
121	dpavlin	41	};
122
123			$(document).ready( function() {
124
125			$('.tag').each( function(i) {
126	dpavlin	48	var n = this.firstChild.nodeValue;
127			_tag.name[i] = n;
128	dpavlin	41	_tag.obj[i] = this;
129	dpavlin	48	this.onclick = function() {
130	dpavlin	51	return _tag.add_tag( n, i );
131	dpavlin	48	}
132	dpavlin	41	});
133			$.log.info( 'found ' + _tag.name.length + ' tags' );
134
135			$.log.info( 'hook onchange to #tags_form' );
136	dpavlin	45	$('#tags_form').keyup( function(e) {
137	dpavlin	41
138	dpavlin	45	$.log.debug('keyup: '+e.keyCode);
139	dpavlin	41
140	dpavlin	45	switch (e.keyCode) {
141			case 38: // up
142			e.preventDefault();
143			_tag.move_suggested( -1 );
144			return false;
145			case 40: // down
146			e.preventDefault();
147			_tag.move_suggested( +1 );
148			return false;
149			case 9: // tab
150			case 13: // return
151	dpavlin	46	if (_tag.current != null) _tag.focus();
152	dpavlin	45	e.preventDefault();
153			return false;
154	dpavlin	41	}
155
156
157	dpavlin	45	var t = _tag.last_tag();
158	dpavlin	41
159	dpavlin	45	$.log.debug('tag: ' + t + ' ['+t.length+']');
160	dpavlin	41
161	dpavlin	45	_tag.clean_selected();
162	dpavlin	41
163	dpavlin	45	if (t == '') return false;
164
165			_tag.select(t);
166
167	dpavlin	51	$.log.info('selected ' + _tag.selected.length + ' tags');
168	dpavlin	45
169			return true;
170			}).submit( function() {
171			$.log.debug('submit');
172	dpavlin	46	return _tag.take_suggested();
173	dpavlin	45	}).blur( function() {
174			$.log.debug('blur');
175	dpavlin	46	return _tag.take_suggested();
176	dpavlin	45	});
177	dpavlin	41
178			$.log.toggle();
179
180	dpavlin	45	_tag.focus();
181	dpavlin	41	});
182