Hey, So I wrote this custom tag that basically is a select list that allows you type in it and filters the options according to what you've typed in.
Some of the data sets in the faux dropdown list are rather large. I am populating a table in a floating div and then turning it visible below the input field where the user is typing. The problem with the large data sets (say over 100 options) is that it takes forever to render the table. So long in fact that FF asks if I want to stop the script. Here is how I populate the list: function setPasField(){ var mac_id = DWRUtil.getValue("mac_id"); var macField = $("mac_id"); DWRUtil.useLoadingMessage(); if(mac_id.length == 2){ DWREngine._execute(_ajaxConfig._cfscriptLocation, null, "getPasCodes",mac_id, updatePasList); } } function updatePasList(r){ DWRUtil.setValue("debug",r.dump()); DWRUtil.useLoadingImage(); alert("passBack"); } function handleKey(myEvent,myField){ /* * the function handleKey() moves the highlighted area up and down in the values div, as well as filtering the values div */ DWRUtil.useLoadingImage(); var myArray = new Array(1); // this array will contain the filtered values var myData = myField.value.toUpperCase(); // this variable contains the current value of the form field var newCounter = 0; // this counter is used to incriment the filtered value array (myArray) var loc = -1; // this variable is used to discover which value is currently highlighted var fieldName = myField.name; var arrayName = myField.name + 'Array'; var contentArray = eval(arrayName); var myDiv = $('tipDiv' + fieldName); myDiv.style.visibility = "visible"; var myDataLength = myData.length // loop through the existing array of values, and filter out the ones that fit with the user entered data for(i = 0; i < contentArray.length; i++){ if(contentArray[i].substr( 0,myDataLength) == myData){ myArray[newCounter] = contentArray[i]; newCounter++ } } if(myArray.length > 0){ var cellFuncs = [ function(data) { return '<div id="boxOption" onmouseover="this.style.backgroundColor = \'blue\'; this.style.color = \'white\'" onmouseout="this.style.backgroundColor = \'white\'; this.style.color = \'black\'" onClick="handleClick(event, this, \'' + fieldName + '\');">' + data + '</div>';} ]; DWRUtil.setValue('tipDiv' + fieldName,'<table id="tips" border="1"></table>'); DWRUtil.addRows("tips",myArray,cellFuncs); var myTable = $("tips"); // now handle the key stroke /*for(i = 0; i < myTable.childNodes.length; i++){ if(myTable.childNodes[i].childNodes[0].bgColor == "blue"){ myTable.childNodes[i].childNodes[0].bgColor == "white"; loc = i; } } if(loc == -1){ myTable.childNodes[0].childNodes[0].bgColor == "blue"; } */ } } Couple of problems. 1. The time it takes making the option Div visable. It takes freaking forever, optimization people, any ideas? 2. It's not working at all in IE. I mean, nothing, and this is unusual, as I've used the AjaxCFC suff in IE with no problems before. 3. For some reason I keep getting an error that the response variable doesn't exist. Any help would be greatly appreciated. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Create robust enterprise, web RIAs. Upgrade & integrate Adobe Coldfusion MX7 with Flex 2 http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:264188 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4