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_obj: new Array(),

        select: function( tag ) {

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

                _tag.selected_obj = Array();
                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 + '\')">' + t + '</a> ';
                                _tag.selected_obj[j] = _tag.obj[i];
                                j++;
                        }
                }

                $('#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_obj.length; i++) {
                        jQuery.className.remove( _tag.selected_obj[i], '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;
                }

                _tag.add_tag( s );
                return false;
        },

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