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 = '<ul>';

                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 += '<li>' + t + '</li> ';
                                _tag.selected_obj[j] = _tag.obj[i];
                                j++;
                        }
                }

                suggest += '</ul>';

                $('#suggest').html( suggest );
                if (j > 0) {
                        $('#suggest li: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 li:nth('+c+')').html();
                if (s == null) {
                        $.log.debug('no suggest, return true');
                        return true;
                }

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