jrails autocomplete selection problems with DIVs or anything else

Question

I just starting using jRails and the jRails auto_complete helper

http://github.com/evilmarty/jrails_auto_complete

I was using the default auto_complete helper before using prototype and the drop in worked fine with jRails except for hovering over the results of the autocomplete. If you use simple text for the result, it works as advertised. But I've been using several divs in my partial which generates the output for the autocomplete.

<li class="location"><div class="image"><img src="/images/flags/<%=h image %>.png"/></div><div class="name"><%=h location.keyword %>,</div><div class="country"> <%=h location.sideinfo %></div></li>

It looks the same and all the CSS works and looks the same as before, but the selection or hovering over the results is messed up. It only allows selection if you hover over the background around the text... anything in a tag, (div, span, etc.) causes the hover the go away and clicking it doesn't add the text to the textbox.

Has anyone else had similar problems?

Answer 1

A bit late I know, but I hit the same problem myself today.

It all boils down to mouseover event bubbling from child objects which obviously lack the autocompleteIndex property (it is only assigned on LI elements. Hence once the pointer is over one of the children, the highlight is gone.

I ended up altering jrails_autocomplete.js like this:

    onHover: function(e) {
        var my_index = e.target.autocompleteIndex;
        if (!my_index) {
          my_index = $(e.target).closest('li').attr('autocompleteIndex');
        }
        if (this.index != my_index) {
            this.index = my_index;
            this.render();
        }
        stopEvent(e);
    },

Now if we fail to find an autocompleteIndex property in the element that fired the mouseover event, we look at the closest parent of type 'li' and use whatever exists there.

A bit hackish, but at least worked for me.

On a sidenote, I also had to tickle onClick as well, or when I clicked the mouse and hit a, say, DIV element, the index was lost. Actually I wonder why this was there in the first place, the keyboard interface doesn't include something similar either.

        onClick: function(e) {
            /*this.index = e.target.autocompleteIndex;*/
            this.selectEntry();
            this.hide();
        },