Javascript Jquery自定义下拉列表（带有UL+输入文本）。输入焦点和值变化的Wird行为

我已经使用HTMLUL和输入文本创建了一个简单的自定义下拉列表

下拉菜单需要鼠标和键盘提供服务。要显示列表，我们必须单击按钮或按下“向下”↓ 键盘上的按钮。然后通过单击at值，它应该显示在输入元素中。它几乎可以正常工作，但我发现几乎没有问题

第一: 当点击显示列表的按钮时，我必须在他的输入上设置焦点，因为我将键盘服务绑定到输入字段。但若输入是集中的，我点击列表中的元素，它会每隔几次点击在输入中设置一次值

第二： 键盘服务很好用。它总是在输入中设置一个好的值。问题在于“Esc”按钮。我绑定了esc以隐藏我的列表。但当我使用它时，它也会将当前值更改为“上一个”或将其删除

在第一个问题中，我试图阻止聚焦，模糊输入中的事件。但当o单击列表时，它总是失去焦点

第二个问题，我试着在按下“Esc”时使用prevenftDefault，但也没用

这是我的代码它并不完美，因为我不能从我的网站复制太多内容

这是我的

编辑：使用Firefox Debugger，它向我展示了有时LI元素上的点击事件甚至不会触发。有了Esc按钮…它在chrome中运行良好，但问题仍然在于firefox

编辑2：另一条新闻。问题是我将事件绑定到隐藏元素上。寻找解决方案

EDIT3:或者隐藏元素可能没有问题。我的鼠标悬停事件在更改类时运行良好，但单击失败。它失败了，因为必须从单击中接收值的输入元素被聚焦

---

EDIT4：我发现了问题。在click事件处理程序中，我设置clicked元素的输入值并关闭列表。但我又添加了一个关闭列表的事件，它在输入失去焦点时关闭列表，单击列表时失去焦点。这样，闭合元素就加倍了。问题是模糊事件在单击事件之前触发并关闭列表。

首先，您有一些无效的HTML。标记需要关闭，并且您有一个尾随。不要使用内联CSS，这是一种糟糕的做法。第三，对所有代码使用适当的缩进。当你把它放在小提琴上时，我们也许能帮你。。在edit4中，你可以看到我发现的失败。现在我正在研究一种解决方案，它可以防止在单击列表时失去输入元素的焦点，但这是无法防止的。然后我将事件绑定到委托以设置触发事件的顺序，但它也不会给我结果。你可以在这里了解我的新问题：你唯一修复的是无效的HTML。我仍然不明白你想要实现什么。单击箭头时要显示下拉列表，单击任何下拉元素或点击“回车”时要将该元素的值设置为文本框吗？