Did you have problems with IE's debugger? Are you sure you're using IE 8 or 9?
A few remarks:
You're not getting anything for marker.myname, because your breakpoint is probably in the wrong scope. You're using it inside an anonymous function inside a $.map() call, so setting the breakpoint inside that anonymous function (by putting
debugger; in there) should give you something, so that's not the problem.
The thing you say about the caching issue is not wrong, but it's really just a guess. It might or might not be the case, and it doesn't really help you fixing the problem, does it?
Ok, here it comes (because you're not going to find it in Firefox, where the problem doesn't arise):
You are using $('#autocomplete'), which is jQuery's way to access DOM objects. If you use the IE debugger and type $('#autocomplete').get(0) (which should return the first DOM object that matched the jQuery selector), you'll see that it's not there. Your input field doesn't exist, and thus the autocomplete will not be set up.
Now, why doesn't the input field exist at the time you are trying to set up the autocomplete?
That's where it gets real bad: You absolutely won't stand any chance finding that out unless you properly indent your code. It's practically unreadable the way it is.
Properly indented, the relevant parts of your code look like this:
PHP Code:
function initialize() {
if (GBrowserIsCompatible()) {
function addMarkersToMap() {
GDownloadUrl('categories2.xml', function(doc) {
$(document).ready(function() {
$( "#autocomplete" ).autocomplete({
source: $.map(gmarkers, function (marker) {return marker.myname})
});
});
});
}
addMarkersToMap();
function search_control() {}
search_control.prototype.initialize = function() {
var contents = document.createElement("div");
contents.style.width="300px";
contents.style.height="25px";
contents.innerHTML="<div id='auto' style='z-index:100'><input type='text' style='font-family:verdana;width:200px; height:18px;font-size:12px' id='autocomplete' autocomplete='off' onKeyPress='return submitenter(this,event)'/><input type=\"button\" onclick=\"searchLocations()\" value=\"Search\"/></div>";
document.getElementById('map').appendChild(contents);
return contents;
}
new search_control().initialize();
}
}
google.setOnLoadCallback(initialize);
which makes the program flow like that:
1.) As soon as google fires its onload event, the initialize function is run
2.) addMarkersToMap is defined and executed.
3.) Within that function, an AJAX request is made to get some XML data
What you want to happen now is
4.a) It takes the AJAX request some time to come back, and in the meantime, the search_control function is run, and the input is added to the DOM.
5.a) The request comes back and the autocomplete is set up.
What apparently happens in IE if it has the XML already in the cache is
4.b) The request comes back immediately, and the callback is executed. Inside the callback you're doing $(document).ready(), which is useless and will be executed immediately, because it was already made sure in 1.) that the DOM is loaded. So the autocomplete is set up immediately, but the input is not yet there, so really nothing happens.
5.b) The input is added to the DOM.
Looking at that properly indented and simplified piece of code, it's very easy to see what has to be changed:
addMarkersToMap() must not run before
new search_control().initialize().
So much for the problem. The most important thing to take away from this, though, is that you must indent your code, or you will never be able to maintain it.