JQuery UI autocomplete NOT WORKING with Chrome on mac OSX

Question

That's really really weird.

In the web app I did (look here), thanks to cloudant guys for free hosting, I finally implemented Jquery UI Autocomplete widget.

I'm using backbone as a framework.

What is really really weird is that IT WORKS WITH EVERYTHING (even IE9!) except CHROME on apple OS.

What I have is that no dropdown list appears when clicking on the text input field.

Chrome on a different OS wokrs (e.g. on win7).

This is the code I use to implement the widget, I report her ejust for the sake of completeness, even if I suppose that that the problem I have DOES NOT depend on the code.

        $(select).on("click",function(){
            var valori=["ex1", "ex2", "ex3"];
            $(input).autocomplete({
                minLength: 0,
                source: valori,
                focus:function(){
                    },
                select:function(event, ui){

                    var categoria=$(select).attr('value');
                    var valore=ui.item.value;
                    self.model.set({category:categoria, value:valore});
                    //~ console.log(self.model);
                    return true;
                    }
                }).focus(function() {
            $(this).autocomplete("search", "");
                });
            });

---- UPDATE ------

I made a comparison btw chrome running on ubuntu and chrome running on macosx.

The result is that under ubuntu, the DOM element gets created (before closing the body tag), while under macosx the DOM element IS NOT created at all.

It looks like under macosx the onclick event is not catched.

What does "doesn't work" mean? Do you see any errors on the page? — Andrew Whitaker, Oct 15 '12 at 13:24
You are right, I forgot to mention it. Now I updated the quesiton and added "What I have is that no dropdown list appears when clicking on the text input field.". Is it more clear? — Daniele B, Oct 15 '12 at 13:39
I updated the question, is it more clear? Chrome under macosx do not create the dom element. — Daniele B, Oct 17 '12 at 13:08

score 0 · Accepted Answer · edited May 23 '17 at 12:31

I found a really helpful post here Why does select box on mac chrome doesn't respond to click event?

Basically, it is a bug of chrome under OSX.

As @JamWaffles explains in its answer,"IIRC, the click event works for s in Firefox, however does not work in Chrome. The best, most supported event is change." and it turns out to be completely true!!

So the working code for my webapp is:

$(select).change(function(){//**************CHANGE AND NOT ON('CLICK', ...  *******
        var valori=["ex1", "ex2", "ex3"];
        $(input).autocomplete({
            minLength: 0,
            source: valori,
            focus:function(){
                },
            select:function(event, ui){

                var categoria=$(select).attr('value');
                var valore=ui.item.value;
                self.model.set({category:categoria, value:valore});
                //~ console.log(self.model);
                return true;
                }
            }).focus(function() {
        $(this).autocomplete("search", "");
            });
        });

Hope this answer is useful for somebody else.

JQuery UI autocomplete NOT WORKING with Chrome on mac OSX

1 Answers1