带有DIV或其他任何东西的jrails自动完成选择问题答案

【问题标题】：jrails autocomplete selection problems with DIVs or anything else带有DIV或其他任何东西的jrails自动完成选择问题
【发布时间】：2009-12-02 13:55:23
【问题描述】：

我刚开始使用 jRails 和 jRails auto_complete helper

http://github.com/evilmarty/jrails_auto_complete

在使用原型之前，我使用了默认的 auto_complete 帮助程序，并且除了将鼠标悬停在自动完成的结果上之外，该插件在 jRails 上运行良好。如果您使用简单的文本作为结果，它会像宣传的那样工作。但是我一直在我的部分中使用几个 div 来生成自动完成的输出。

<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>

它看起来和以前一样，所有的 CSS 工作和看起来都和以前一样，但是选择或悬停在结果上是一团糟。仅当您将鼠标悬停在文本周围的背景上时才允许选择...标签中的任何内容（div、span 等）都会导致悬停消失，单击它不会将文本添加到文本框。

有没有其他人遇到过类似的问题？

【问题讨论】：

标签： jquery ruby-on-rails autocomplete jrails jrails-auto-complete

【解决方案1】：

我知道有点晚了，但我今天自己也遇到了同样的问题。

这一切都归结为从明显缺乏 autocompleteIndex 属性的子对象冒泡的 mouseover 事件（它只分配在 LI 元素上。因此，一旦指针在其中一个子对象上，高亮就消失了。

我最终像这样更改 jrails_autocomplete.js：


    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);
    },

现在，如果我们未能在触发 mouseover 事件的元素中找到 autocompleteIndex 属性，我们将查看最近的类型为“li”的父级并使用那里存在的任何内容。

有点老套，但至少对我有用。

在旁注中，我还必须在 onClick 上挠痒痒，或者当我单击鼠标并点击 DIV 元素时，索引丢失了。其实我想知道为什么一开始会有这个，键盘界面也不包含类似的东西。


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

【讨论】：