Autocomplete can't select on IE
I recently installed Autocomplete and I love it. I have a "citystate" field that collects data from geonames.org via JSON. It works great on FF and Chrome, but on IE (7 and 8) I'm experiencing a frustrating problem. When I select the city/state from the list that pops up, I cannot select it. Instead, I get an Javascript error:
Message: Unexpected call to method or property access.
Line: 104
Char: 68
Code: 0
The Developer Tool says "Unexpected call to method or property access". jquery-1.4.2.min.js, line 104 character 68.
That appears to be this: {this.nodeType===1&&this.insertBefore(a,this.firstChild)})
Here's my input:
<input id="citystate" tabindex="3" class="ui-widget input required pageRequired" maxlength="150" size="30" />
And here's the function (practically taken out of the demo):
$("#citystate").autocomplete({
source: function(request, response) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
country: "US",
name_startsWith: request.term
},
success: function(data) {
response($.map(data.geonames, function(item) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : ""),
value: item.name + ", " + item.adminName1
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
log(ui.item ? (ui.item.label) : "Nothing selected, input was " + this.value);
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
I've tried different versions of jQuery and different DOCTYPEs. Nothing seems to help. Does anyone have any ideas?
Thanks!