jquery autocomplete not working in ie

Question

works beautifully in firefox and chrome but ie give an error:

"name is null or not an object"

i have posted the line that is failing in IE in bold below.

$("#toemail").autocomplete(emails, {  
 minChars: 0,  
 width: 310,  
 matchContains: true,  
 autoFill: false,  
 formatItem: function(row, i, max) {  
  return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";  
 },  
 formatMatch: function(row, i, max) {  
  **return row.name + " " + row.to;**  
 },  
 formatResult: function(row) {  
  return row.to;  
 }
});

EDIT: i figured it out ... answered below.

Answer 1

What is the error message? Hhave you used visual stuido/script debugger/ie8 developer tools to actually step into the js and analyse the row & max objects to see what they are?

Add a debugger statement as follows and it will break into the debugger before the error occurs.

formatMatch: function(row, i, max) {  
           debugger;
           return row.name + " " + row.to;
        },

Answer 2

i figured it out it was an extra comma at the end of the last item in the list in the JSON. looks like FF doesn't care but IE did.

Answer 3

for some reason IE calls the formatItem function on page load. the same happens with formatMatch and formatResult if you provide custom functions for them. the problem is that when IE calls these functions it does not provide any parameters and that causes the error.

I fixed this by modifying the plugin script itself, by adding tests for the existence of the value before trying to use it. I modified the default formatItem fucntion from

formatItem:function(row){return row[0];}

to

formatItem:function(row){if (row) return row[0]; else return "";}

and modifying the populate() function, I changed

  if(value===false)continue; 

to

  if(!value || value===false)continue;

also if you provide your own custom functions for formatItem, formatMatch, or formatResult, be sure to test the existence of the row parameter, for example:

formatItem: function( row, i, max ) {

  if (row)
    return row.name + " (" + row.id + ")";
}

Answer 4

I know this is an old post, but I just had the same problem and like to add my "solution" - though I don't feel it is a good one.

I was using JQuery 1.4.2 to do an ajax request to get some xml to show in the autocomplete dropdown, but I kept getting this error in IE:

'location.protocol' is null or not an object

I looked online and several sources recommended going back to 1.3.2, which I did, and several issues I was having with ajax calls cleared up. I am not sure what to make of this issue, and don't feel satisfied with the solution, but it did work.

Answer 5

for me, removing the trailing slash in the JSON and these other suggestions didn't work. This is what I did:

Changed:

    $(":text, textarea").result(findValueCallback).next().click(function() {
    $(this).prev().search();
});

To:

$("#suggest1").result(findValueCallback).next().click(function() {
    $(this).prev().search();
});

This fixed it. #suggest1 is the ID of my text input.