单击基于javascript的自动完成/下拉菜单上的事件未正确关闭

我创建了一个脚本，通过隐藏/显示使用所述输入定位的

来模拟

的自动完成。一旦用户单击

，

将可见并可单击，并在满足以下三个条件之一时关闭：

• 用户重新单击

• 用户单击显示的

• 用户单击与此系统无关的任何内容

到目前为止，我已经把一切都做好了。不幸的是，如果页面上有两个这样的“自动完成”字段，我就会遇到问题。如果用户打开一个“自动完成”界面，然后单击打开另一个界面，则第一个/原始界面不会按预期关闭

我似乎不知道哪里出了错

window.addEvent（'domready'，function（）{
新的自动完成（）；
});
var autoComplete=新类({
选项：{
版本：'1.0'，
最新更新：“2016-06-27”
},
实现：[选项，事件]，
初始化：函数（选项）{
此选项。设置选项（选项）；
$$（'.autocomplete'）。每个（函数（acl）{
acl.getChildren（'ul li'）。每个（函数（li）{
li.addEvent（'click'，function（）{
acl.getChildren（'input[type=text]'）[0]。value=li.get（'html'）；
acl.getChildren（'input[type=hidden]'）[0]。value=li.get（'data-id'）；
acl.getChildren（'ul'）.addClass（'hidden'）；
});
});
acl.getChildren（'input'）[0]。addEvents({
点击：功能（e）{
e、 预防默认值（）；
e、 停止传播（）；
var el=e.target；
var val=el.value；
var aul=el.getParent（）.getChildren（'ul'）[0]；
var-str=''；
aul.toggleClass（“隐藏”）；
aul.getChildren（）.each（函数（l）{
str=l.get（'html'）.toLowerCase（）；
if（str.indexOf（val.toLowerCase（））！=0）{
l、 addClass（“隐藏”）；
}否则{
l、 removeClass（“隐藏”）；
}
});
},
键控：功能（e）{
e、 预防默认值（）；
e、 停止传播（）；
var el=e.target；
var val=el.value；
var aul=el.getParent（）.getChildren（'ul'）[0]；
var-str=''；
aul.removeClass（“隐藏”）；
aul.getChildren（）.each（函数（l）{
str=l.get（'html'）.toLowerCase（）；
if（str.indexOf（val.toLowerCase（））！=0）{
l、 addClass（“隐藏”）；
}否则{
l、 removeClass（“隐藏”）；
}
});
}
});
});
$（document.body）.addEvent（'click'，function（）{
$$（'.autocomplete ul'）.addClass（'hidden'）；
});
}
});
html，
身体{
身高：100%；
}
.自动完成{
位置：相对位置；
}
.自动完成{
列表样式：无外无；
背景色：#FFF；
边际：0px；
填充：0px；
位置：绝对位置；
排名前100名；
左：0px；
右：0px；
z指数：500；
}
.自动完成ul li{
边框宽度：0 1px 1px；
边框样式：实心；
边框颜色：#000；
}
.自动完成ul li：第一个孩子{
边框宽度：1px；
}
.自动完成ul li：悬停{
背景色：#CCC；
}

Drk：

Nito
Seath
四王
混沌之床
腐烂的
公爵亲爱的弗雷娅
旧铁匠
失落的罪人
Yhorm
Aldritch
深渊观察者
Lothric

土地发展：

牧师野兽
父亲Gascoigne
亨威克女巫
阿梅利亚牧师
雅纳姆的阴影
真空Rom
重生的人
Micolash
梅尔戈的奶妈
老猎人日尔曼
月球存在

问题是，当单击正文时，.autocomplete元素会隐藏

$(document.body).addEvent('click', function() {
    $$('.autocomplete ul').addClass('hidden');
});

您可以在document.body单击上添加“hidden”类，但当您单击另一个.autocomplete输入时，事件不会冒泡到body元素，因为您有意阻止它在具有此行的click事件中传播

e.stopPropagation();

您可以通过添加条件以单击事件（其中隐藏所有其他.autocomplete元素）来解决此问题，或者为模糊事件添加另一个处理程序（其中隐藏元素本身）。
这里的问题是，当您单击输入时，与其他输入绑定的事件不会被触发，因此类不会更改，您必须检查文档中是否打开了任何其他自动完成功能，而不应关闭该功能。你可以通过点击事件中的一个小检查来实现这一点


window.addEvent（'domready'，function（）{
新的自动完成（）；
});
var autoComplete=新类({
选项：{
版本：'1.0'，
最新更新：“2016-06-27”
},
实现：[选项，事件]，
初始化：函数（选项）{
此选项。设置选项（选项）；
$$（'.autocomplete'）。每个（函数（acl）{
acl.getChildren（'ul li'）。每个（函数（li）{
li.addEvent（'click'，function（）{
acl.getChildren（'input[type=text]'）[0]。value=li.get（'html'）；
acl.getChildren（'input[type=hidden]'）[0]。value=li.get（'data-id'）；
acl.getChild
window.addEvent('domready', function() {
    $$('.autocomplete').each(function(el) {
        new autoComplete(el);
    });
});
var autoComplete = new Class({
    options: {
        version: '1.0',
        lastUpdate: '2016-06-27'
    },
    Implements: [Options, Events],
    initialize: function(acl, options) {
        this.setOptions(options);
        var self = this;
        var ul = acl.getElement('ul');
        var lis = ul.getChildren('li');
        var input = acl.getElement('input');

        lis.addEvent('mousedown', function(e) {
            input.value = this.get('html');
            acl.getElement('input[type=hidden]').value = this.get('data-id');
            ul.addClass('hidden');
        });

        input.addEvents({
            mousedown: function(e) {
                ul.toggleClass('hidden');
                self.toggle(lis, this.value.toLowerCase());
            },
            keyup: function(e) {
                ul.removeClass('hidden');
                self.toggle(lis, this.value.toLowerCase());
            },
            blur: function(e) {
                ul.addClass('hidden');
            }
        });
    },
    toggle: function(els, val) {
        els.each(function(el) {
            var str = el.get('html').toLowerCase();
            var match = str.indexOf(val) != -1;
            el.toggleClass('hidden', !match);
        });
    }
});