autocomplete.js

$(function(){
	$('.autocomplete .input').live("propertychange keydown keypress keyup input paste focus click", function(e){
		e.stopImmediatePropagation();
		e.stopPropagation();

		var $parent = $(this).parents('.autocomplete');
		var $dropdown = $parent.find('.dropdown');

		if( $dropdown.length === 0 )
		{
			$parent.append($('<div class="hideOnBodyClick dropdown"></div>'));
			$dropdown = $parent.children('.dropdown').hide();
		}

		var min = $parent.attr('min') ? parseInt($parent.attr('min')) : 3;

		switch( e.which )
		{
			default:
				var value = $(this).val();
				var lastValue = $(this).attr('last-value');
				$(this).attr('last-value',value);

				if( value.length < min || value == $(this).attr('defaultvalue') )
				{
					$dropdown.empty().hide();
				}
				else if( $dropdown.html().length > 0 )
				{
					$dropdown.show();
				}

				if( value.length < min || lastValue == value || value == $(this).attr('defaultvalue') )
				{
					return;
				}

				var page = $parent.attr('completeWith');
				$.ajax('ajax.php?autocomplete=1&page='+page,
				{
					cache: false,
					ifModified:false,
					data: {
						search: value
					},
					success: function(ret){
						$dropdown.show();
						$dropdown.html('<div class="arrow"><div></div></div><div class="scroller">'+ ret +'</div>');
					},
					dataType:'html',
					type:'post'
				});
			break;

			case 38:
				// Up key
				if( e.type != "keydown" )
				{
					e.preventDefault();
					return false;
				}

				var $slctd = $dropdown.find('.selected');
				var $next = [];

				if( $slctd.length != 0 )
				{
					$next = $slctd.prev('.item');
					$slctd.removeClass('selected');
				}

				if( $next.length == 0 ) $next = $dropdown.find('.item').last();

				$next.addClass('selected');

				e.preventDefault();
				return false;
			break;

			case 40:
			case 9:
				// down/tab key
				if( e.type != "keydown" )
				{
					e.preventDefault();
					return false;
				}

				var $slctd = $dropdown.find('.selected');
				var $next = [];

				if( $slctd.length != 0 )
				{
					$next = $slctd.next('.item');
					$slctd.removeClass('selected');
				}

				if( $next.length == 0 ) $next = $dropdown.find('.item').first();

				$next.addClass('selected');

				e.preventDefault();
				return false;
			break;

			case 13:
				var $slctd = $dropdown.find('.selected').first();
				if( $slctd.length > 0 )
				{
					if( $slctd.attr('href') )
					{
						document.location.href = $slctd.attr('href');
					}
					else
					{
						$slctd.trigger('click');
						e.preventDefault();
					}

					return false;
				}
			break;
		}
	});

	$('.fake_input.autocomplete .dropdown .item').live('click',function(e){
		var id = $(this).attr('tagid'),
			name = $(this).attr('tagname'),
			$tags = $(this).parents('.fake_input');
		var $tag = $tags.find('.item-'+id),
			$input = $tags.find('input[type=hidden]'),
			$maininput = $tags.find('input.input');

		if( $tag.length > 0 )
		{
			if( $tag.is(':animated' ) ) return false;
			$tag.fadeTo(300,.01,function(){
				$tag.fadeTo(300,1);
			});
			return false;
		}

		$maininput.before('<div class="tag item-' + id + '" tagid="'+id+'">' + name + '<span></span></div>');
		$tags.find('.item-'+id).hide().fadeIn(300);
		$maininput.val('');
		$('.fake_input.autocomplete .dropdown').hide();
		$input.val($input.val()+id+',');
	});

	$('.fake_input.autocomplete .tag').live('click',function(e){
		$(this).animate({
			'width': '0px',
			'opacity': '0',
			'padding-left': '0',
			'padding-right': '0',
			'margin': '0'
		}, 300,function(){
			$(this).remove();
		});
		$(this).siblings('input[type=hidden]').val($(this).siblings('input[type=hidden]').val().replace(","+$(this).attr('tagid')+",",","));
	});
});