In-Portal Issue Tracker

Index: ajax_dropdown.js
===================================================================
--- ajax_dropdown.js	(revision 13756)
+++ ajax_dropdown.js	(working copy)
@@ -69,11 +69,20 @@
 */
 
 
-function AJAXDropDown(input_id, suggest_url_callback, get_value_callback, $use_tags) {
+function AJAXDropDown(input_id, suggest_url_callback, get_value_callback, $custom_params) {
+	this.params = {
+		useTags: false,
+		maxWidth: false
+	};
+
+	if ($custom_params !== undefined) {
+		$.extend(this.params, $custom_params);
+	}
+
 	this.Input = document.getElementById(input_id);
 
 	if (!$( jq('#div_' + input_id) ).length) {
-		$('<div id="div_' + input_id + '"></div>').insertAfter(this.Input);
+		$('<div id="div_' + input_id + '"></div>').appendTo('body'); // .insertAfter(this.Input);
 	}
 
 	this.Box = document.getElementById("div_"+input_id);
@@ -92,8 +101,6 @@
 		}
 	);
 
-	this.useTags = $use_tags === undefined ? false : $tags;
-
 	if (this.useTags) {
 		this.tagValue = '';
 		this.prevTagValue = '';
@@ -116,11 +123,11 @@
 	this.Box.style.overflow = 'auto';
 	this.Box.className = 'suggest-box';
 
-	this.Input.setAttribute('autocomplete', 'off');
 	// add onkeyup
 	var obj = this;
 
 	$(this.Input)
+	.attr('autocomplete', 'off')
 	.keydown (
 		function($e) {
 			if ($e.keyCode == 13) {
@@ -372,52 +379,51 @@
 	}
 }
 
-
-AJAXDropDown.prototype.getBoxHeight = function() {
-	if (this.Box.style.display != 'block') {
-		this.Box.style.display ='block';
-		var box_height = this.Box.clientHeight;
-		this.Box.style.display = 'none';
-
-		return box_height;
-	}
-
-	return this.Box.clientHeight;
-}
-
 AJAXDropDown.prototype.OpenBox = function() {
-	this.Box.style.height = 'auto';
+	var $box = $(this.Box);
+	var $input = $(this.Input);
+	var $input_position = $(this.Input).offset();
 
-	var pos = findPos(this.Input);
-	var dim = getDimensions(this.Input);
+	$box.css('height', 'auto');
 
-	var input_height = dim.innerHeight + dim.borders[0] + dim.borders[2];
-	var input_width = dim.innerWidth + dim.borders[1] + (document.all ? dim.borders[3] : 0 );
+	// try to place suggest-box below input
+	var $input_width = $input.outerWidth();
+	var $input_height = $input.outerHeight();
 
-	this.Box.style.width = input_width + 'px';
-	var box_height = this.getBoxHeight();
+	if (this.params.maxWidth === false) {
+		$new_box_width = $input.width();
 
-	var box_left = pos[0];
-	var box_top = pos[1] + input_height;
-	var container = document.body;
+		if (document.all) {
+			$new_box_width += ($input_width - $input.innerWidth()); // add borders for IE
+		}
+	}
+	else {
+		var $new_box_width = this.params.maxWidth;
+	}
 
-	var scroll_container = $('#scroll_container').get(0);
-
-	if (scroll_container) {
-		var xpos = findPos(scroll_container);
-		box_left -= xpos[0];
-		box_top -= xpos[1];
-		container = scroll_container;
+	if ($box.width() < $new_box_width) {
+		// suggest-box width at lease same as input's width
+		$box.css('width', $new_box_width);
 	}
 
-	if (box_top + box_height > container.offsetHeight) {
-		box_top = box_top - input_height - box_height;
+	var $box_left = $input_position.left;
+	var $box_top = $input_position.top + $input_height;
+	var $box_height = $box.outerHeight();
+
+	if ($box_top + $box_height > document.body.offsetHeight) {
+		// move above the box
+		$box_top -= ($input_height + $box_height);
 	}
 
-	this.Box.style.left = box_left + 'px';
-	this.Box.style.top = box_top + 'px';
+	$(this.Box)
+	.css(
+		{
+			left: $box_left,
+			top: $box_top
+		}
+	)
+	.show();
 
-	this.Box.style.display = 'block';
 	this.BoxOpen = true;
 }