jQueryUI Autocomplete function not properly working on IE9

Question

I am using this snippet of code for my jQueryUI Autocomplete function on my site,

$( "#find" ).autocomplete({
            minLength: 1,
            source: function(request, response) {
                        var results = $.ui.autocomplete.filter(locations, request.term);
                        response(results.slice(0, 10));
                    },
            focus: function( event, ui ) {
                $( "#find" ).val( ui.item.value );
                return false;
            },
            appendTo: "#results",
            open: function(){
                var position = $("#results").position(),
                                left = position.left, top = position.top;

                        $("#results > ul").css({left: (left + 15) + "px",
                                                                top: (top + 30) + "px", width: (206) + "px" });
            },

            select: function( event, ui ) {
                $( "#find" ).val( ui.item.value );
                $(":header.title").html(ui.item.value);
                var new_url = ui.item.href; // instead of adding 'statistics', by using location.hash, it wont be necessary unlike using pushState()
                location.hash = new_url;
                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "<br />" + item.desc + "</a>" )
                .appendTo( ul );
        };

Actually this works perfectly fine on Firefox and Chrome, it behaves just like what it exactly behaves on the sample given here, I just merely copied and modified it according to what I wanted. But on IE9, the item.desc which shows up on other browsers is not visible on IE9. I think the code to start with fixing is the last part, the part which appends the suggestions of the autocomplete. Can someone help me out here? Cheers!

have you looked for errors in the console? I am currently using the exact same control and didn't have any problems in IE9 on Win7, but there could be some other code that is causing an error — Qpirate, Sep 20 '12 at 15:49
@Qpirate only this error, `SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5) jquery.bgiframe.min.js?v2, line 10 character 978` is on my IE9, but this error is not on firefox and chrome. Do you think this is the reason why it wont work? — Tsukimoto Mitsumasa, Sep 20 '12 at 15:55
It could be depending on when you add your JS file for the JQueryUI import. have a look here they seemed to have solved it http://stackoverflow.com/questions/6424526/bgiframe-plugin-causes-error-in-ie9 — Qpirate, Sep 20 '12 at 18:11

score 0 · Answer 1 · answered May 27 '13 at 21:20

0

You need to upgrade bgiframe.min.js to a later version (3.0 works fine) https://github.com/brandonaaron/bgiframe

answered May 27 '13 at 21:20

Eduardo Molteni

38,786
23
141
206

score 0 · Answer 2 · answered Jul 08 '13 at 06:39

Create a new css class to override the existing jquery ui autocomplete "position":"absolute"

.ui-autocompelte{
"position": "absolute"
....
....
}

New CSS Class

.ui-autocomplete-ie9-fix { position: relative !important; }

and apply this css class after $("#find").autocompelte({ ........ ....... });

if (!$.browser.msie || ($.browser.msie && $.browser.version != 9)) {
        $("ul.ui-autocomplete").addClass("ui-autocomplete-ie9-fix");
    }

score -1 · Answer 3 · answered May 03 '13 at 21:47

-1

Add below tag after head tag

<meta http-equiv="X-UA-Compatible" content="IE=8" />

answered May 03 '13 at 21:47

Joe

1
1

jQueryUI Autocomplete function not properly working on IE9

3 Answers3