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	/*
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	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	var suggest = '';
20
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	suggest += '<a href="#" onclick="javascript:return _tag.add_tag(\'' + t + '\')">' + t + '</a> ';
29	_tag.selected_obj[j] = _tag.obj[i];
30	j++;
31	}
32	}
33
34	$('#suggest').html( suggest );
35	if (j > 0) {
36	$('#suggest a:nth(0)').addClass('selected');
37	_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	if (c == null) return c;
49
50	$('#suggest').html('');
51	_tag.current = null;
52
53	return c;
54	},
55
56
57	take_suggested: function() {
58	var c = _tag.current;
59	if (c == null) {
60	$.log.debug('no current, return true');
61	return true;
62	}
63
64	var s = $('#suggest a:nth('+c+')').html();
65	if (s == null) {
66	$.log.debug('no suggest, return true');
67	return true;
68	}
69
70	_tag.add_tag( s );
71	return false;
72	},
73
74	add_tag: function( t ) {
75	$.log.info('add: '+t);
76	_tag.clean_selected();
77	_tag.focus();
78	$('#tags').val(
79	$('#tags').val().replace(
80	/[^ ]*$/, t + ' '
81	)
82	);
83	return false;
84	},
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	var s = '#suggest a:nth('+c+')';
99	$( s ).removeClass('selected');
100	$.log.debug('remove selected from '+s);
101	s = '#suggest a:nth('+to+')';
102	$( 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	};
116
117	$(document).ready( function() {
118
119	$('.tag').each( function(i) {
120	var n = this.firstChild.nodeValue;
121	_tag.name[i] = n;
122	_tag.obj[i] = this;
123	this.onclick = function() {
124	return _tag.add_tag( n );
125	}
126	});
127	$.log.info( 'found ' + _tag.name.length + ' tags' );
128
129	$.log.info( 'hook onchange to #tags_form' );
130	$('#tags_form').keyup( function(e) {
131
132	$.log.debug('keyup: '+e.keyCode);
133
134	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	if (_tag.current != null) _tag.focus();
146	e.preventDefault();
147	return false;
148	}
149
150
151	var t = _tag.last_tag();
152
153	$.log.debug('tag: ' + t + ' ['+t.length+']');
154
155	_tag.clean_selected();
156
157	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	return _tag.take_suggested();
167	}).blur( function() {
168	$.log.debug('blur');
169	return _tag.take_suggested();
170	});
171
172	$.log.toggle();
173
174	_tag.focus();
175	});
176