Lookup field not rendering like drop down in New Item form

Question

Hi
I have been making a page to add new item to a list, for this i am using new item form.
I am having a two lookup fields in that list of which one contains more than 20 items and other only 3.
My first problem is that first lookup renders as a text box ONLY in IE 9 mode(nothing appears even when you click on the down arrow), but when I change the mode to IE 8, the rendering changes to a textbox + ajax + filtering list instead of the simple drop
down list control.
BUT FIREFOX AND OTHER BROWSERS RENDER PROPERLY AS A SIMPLE DROPDOWN.
I have read several blogs about this, but could'nt find a simple solution.
Anyone has any idea on this?
thanks!
IE rendered 1st lookup like this:
<INPUT onkeydown="CoreInvoke('HandleKey')"
id=ctl00_ctl20_g_2f56956b_9ff1_48a5_af9a_ba167804f29a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01 onchange="CoreInvoke('HandleChange')"
class=ms-lookuptypeintextbox
title=Country onfocusout="CoreInvoke('HandleLoseFocus')"
onkeypress="CoreInvoke('HandleChar')"
name=ctl00$ctl20$g_2f56956b_9ff1_48a5_af9a_ba167804f29a$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$ctl01
value=(None) type=text match choices="(None)|0|Austria|1|Belgium|2|Bulgaria|3|Cyprus|4|Denmark|5|Finland|6|Germany|7|Kazakhstan|8|Liechtenstein|9|Moldavia|10|Norway|11|Poland|12|Portugal|13|Romania|14|Russia|15|Slovania|16|Spain|17|Sweden|18|Switzerland|19|The Netherlands|20|Turkey|21|Ukraine|22|United Kingdom|23" optHid="SPCountry_Hidden"
opt="_Select">
<IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px"
onclick="CoreInvoke('ShowDropdown','ctl00_ctl20_g_2f56956b_9ff1_48a5_af9a_ba167804f29a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01');"
alt="Display lookup values"
src="/_layouts/images/dropdown.gif">
<SELECT style="Z-INDEX: 2; POSITION: absolute; DISPLAY: none; TOP: 871px; LEFT: 640px"
onkeydown=HandleOptKeyDown()
id=_Select
class=ms-lookuptypeindropdown
onfocusout=OptLoseFocus(this)
ondblclick=HandleOptDblClick() tabIndex=-1 size=8
name=_Select ctrl="ctl00_ctl20_g_2f56956b_9ff1_48a5_af9a_ba167804f29a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01">
<OPTION selected value=0>(None)</OPTION>
<OPTION value=1>Austria</OPTION>
<OPTION value=2>Belgium</OPTION>
<OPTION value=3>Bulgaria</OPTION>
<OPTION value=4>Cyprus</OPTION>
<OPTION value=5>Denmark</OPTION>... and so on
</SELECT>
Regards, Nayan

Answer 1

We had the same issue in our environment and we made use of jQuery to resolve the issue. The idea has been taken from SPServices.codeplex as mentioned by Christophe, but extends it in a way with few changes to make it work in our environment for each instance
of this drop-down in the entire web application.
$("input[class='ms-lookuptypeintextbox']").each(function
columnName = $(
this).attr('title');
OverrideDropDownList(columnName);
// Main Function
function OverrideDropDownList(columnName) {
// Construct a drop down list object
var lookupDDL =
new DropDownList(columnName);
// Do this only in complex mode...
if (lookupDDL.Type ==
"C") {
// Hide the text box and drop down arrow
lookupDDL.Obj.css(
'display',
'none');
lookupDDL.Obj.next(
"img").css('display',
'none');
// Construct the simple drop down field with change trigger
var tempDDLName =
"_" + columnName;
if (lookupDDL.Obj.parent().find("select[ID='"
+ tempDDLName + "']").length == 0) {
lookupDDL.Obj.parent().append(
"<select name='" + tempDDLName +
"' id='" + tempDDLName +
"' title='" + tempDDLName +
"'></select>");
lookupDDL.Obj.parent().find(
"select[ID='" + tempDDLName +
"']").bind("change",
function () {
updateOriginalField(columnName, tempDDLName);
// Get all the options
var splittedChoices = lookupDDL.Obj.attr('choices').split("|");
// get selected value
var hiddenVal = $('input[name='
+ lookupDDL.Obj.attr("optHid") +
']').val()
if (hiddenVal ==
"0") {
hiddenVal = lookupDDL.Obj.attr(
"value")
// Replacing the drop down object with the simple drop down list
lookupDDL =
new DropDownList(tempDDLName);
// Populate the drop down list
for (var
i = 0; i < splittedChoices.length; i++) {
var optionVal = splittedChoices[i];
i++;
var optionId = splittedChoices[i];
var selected = (optionId == hiddenVal) ?
" selected='selected'" :
lookupDDL.Obj.append(
"<option" + selected +
" value='" + optionId +
"'>" + optionVal +
"</option>");
// method to update the original and hidden field.
function updateOriginalField(child, temp) {
var childSelect =
new DropDownList(child);
var tempSelect =
new DropDownList(temp);
// Set the text box
childSelect.Obj.attr(
"value", tempSelect.Obj.find("option:selected").val());
// Get Hidden ID
var hiddenId = childSelect.Obj.attr("optHid");
// Update the hidden variable
$(
'input[name=' + hiddenId +
']').val(tempSelect.Obj.find("option:selected").val());
// just to construct a drop down box object. Idea taken from SPServces
function DropDownList(colName) {
if ((this.Obj
= $("input[Title='" + colName +
"']")).html() !=
null) {
this.Type =
"C";
// Multi-select: This will find the multi-select column control on English and most other languages sites where the Title looks like 'Column Name possible values'
// Simple - when they are less than 20 items
if ((this.Obj
= $("select[Title='" + colName +
"']")).html() !=
null) {
this.Type =
"S";
// Compound - when they are more than 20 items
else
if ((this.Obj
= $("input[Title='" + colName +
"']")).html() !=
null) {
this.Type =
"C";
// Multi-select: This will find the multi-select column control on English and most other languages sites where the Title looks like 'Column Name possible values'
else
if ((this.Obj
= $("select[ID$='SelectCandidate'][Title^='" + colName +
" ']")).html() !=
null) {
this.Type =
"M";
// Multi-select: This will find the multi-select column control on a Russian site (and perhaps others) where the Title looks like 'Russion stuff: Column Name'
else
if ((this.Obj
= $("select[ID$='SelectCandidate'][Title$=': " + colName +
"']")).html() !=
null) {
this.Type =
"M";
else
this.Type =
null;
// End of function dropdownCtl
- Sid