SPAutocomplete

Sep 16, 2011 at 7:15 PM
Edited Sep 18, 2011 at 12:46 PM

Let me preface this post by saying we are using a custom form...

We've been running into an issue with this function today and it's related to the width of the containerId.  I've dived into the DOM and found the ID for containerId to be: SPAutocomplete_ for this <ul>.  When looking at the attributes, I noticed this <ul> had a width of zero.  That was a bit interesting when looking at the source code.  I kept at it and found a piece of code that fixes my issue, but also, seems like I found something that could be tweaked as well.

On line 2937:

 

var columnObjWidth = $(columnObj).css("width");

 

Contains the width of the input.  A few lines below is the code:

 

		var containerId = genContainerId("SPAutocomplete", opt.columnName);		
		columnObj.after("<div><ul id='" + containerId + "' style='width:" + columnObjWidth + ";display:none;padding:2px;border:1px solid #2A1FAA;background-color:#FFF;position:absolute;z-index:40;margin:0'></div>");

		// Set the width to match the width of the input control
		$("#" + containerId).css("width", columnObj.width());		

 

To get this to work for me, I changed:

 

$("#" + containerId).css("width", columnObj.width());

 

to:

 

$("#" + containerId).css("width", columnObjWidth);

 

To me, it seems that this should be in place.  I'm not sure why the .width() call was failing in my case, but above in the code, the width is already available.  Looking more into this function, I noticed another optimization you can put in.  Once you jQuerify your input variable, there's no need to continue to call jQuery on it.  There are other jQuery calls that you make on columnObj, so it'd save some clock cycles by removing those too. The code I have now looks like this:

 

		var columnObj = $("input[Title='" + opt.columnName + "']");
		$("input[Title='" + opt.columnName + "']").css("position", "");
		var columnObjId = columnObj.attr("ID");
		var columnObjColor = columnObj.css("color");
		var columnObjWidth = columnObj.css("width");

		if(columnObj.html() === null && opt.debug) {
			errBox("SPServices.SPAutocomplete",
				"columnName: " + opt.columnName,
				"Column is not an input control or is not found on page");
			return;
		}

		// Remove the <br/> which isn't needed and messes up the formatting
		columnObj.closest("span").find("br").remove();
		columnObj.wrap("<div>");

		// Create a div to contain the matching values and add it to the DOM
		var containerId = genContainerId("SPAutocomplete", opt.columnName);		
		columnObj.after("<div><ul id='" + containerId + "' style='width:" + columnObjWidth + ";display:none;padding:2px;border:1px solid #2A1FAA;background-color:#FFF;position:absolute;z-index:40;margin:0'></div>");

		// Set the width to match the width of the input control
		$("#" + containerId).css("width", columnObjWidth);		

 

Do you think you could squeeze this tweak in your next release?

Many thanks,

Matt

 

 

Coordinator
Sep 20, 2011 at 1:17 AM

Matt:

Right you are on all counts. I don't think it'l make a huge difference performance-wise, but it's work doing the tweaks. I'll have them in the next alpha.

M.

Coordinator
Sep 20, 2011 at 1:18 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.