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.

Answer 1

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.