jQuery Issue in Internet Explorer IE 8

Question

I set a global variable, $category_list, which is an array of category names.

In the footer I have:

<?php if ( isset($category_list) ): ?>
    <script type="text/javascript">
        var wordlist = [
            <?php foreach ($category_list as $row) { echo '"' . $row->name . '", '; } ?>
        ];
    </script>  
<?php endif ?>

I have an external .js file with the following code:

jQuery( ".cats" ).autocomplete({
    source: function(req, responseFn) {
        var matches = new Array();
        var needle = req.term.toLowerCase();

        var len = wordlist.length;
        for(i = 0; i < len; ++i)
        {
            var haystack = wordlist[i].toLowerCase();
            if(haystack.indexOf(needle) == 0 ||
               haystack.indexOf(" " + needle) != -1)
            {
                matches.push(wordlist[i]);
            }
        }
        responseFn( matches );
    }
});

An error occurs in IE8 so the dropdown doesn't work: wordlist[...] is null or not an object

Not sure how to get round this, the dropdown list of category names works fine in IE 9, Firefox and Chrome but it doesn't on IE8, affecting around 50% of IE users. I'm using the Codeigniter framework. I've tried loading the footer script before the external file but no joy.

Much love for any help <3

Answer 1

IE8 doesn't like trailing , in array literal definitions. You'll have to refactor your code to not leave one.

<?php 
    $rows = array();
    foreach ($category_list as $row) { $rows[] = '"' . $row->name . '"'; } 
    echo implode(',', $rows);
?>

or

var wordlist = <?php 
    $rows = array();
    foreach ($category_list as $row) { $rows[] = '"' . $row->name . '"'; } 
    echo json_encode($rows);
?>;