确保用户从 html 表单中过滤后的<UL>中选择项目

Question

我有一个带有多个

<input>

标签的html表单（名称、日期、时间、订单号、任务、注释是主要输入）。 在订单号输入中，当用户开始输入时，会出现一个

<ul>

，并根据用户在订单号输入中输入的内容进行过滤。 我希望他们在移动到下一个字段之前从列表中进行选择。这是出于数据验证的原因。因此，如果他们在输入中键入

mee

，

MEETINGS

将出现在列表中。

mee

提交表单时的数据无效。

onblur=function()

不起作用 - 它在加载表单时显示列表而不进行过滤。

document.getElementById('myInput').addEventListener('blur', function() {}

与

document.getElementById('myUL').orderlistElement.querySelector('li.active')

一起工作，因为它检测到尚未做出选择。它告诉用户（通过

alert()

）他们已离开输入框而没有进行选择，但他们必须离开输入框才能进行选择，因此每次都会出现。

我在提交时对表单输入进行验证，但我希望在问题发生时提请用户注意。

在尝试编写代码之前，我什至无法想到其中的逻辑。也许有一个行业术语来形容我想要实现的目标。

类似于：

1. 检查用户是否已离开

   <input>

   ,
2. 设置状态变量，
3. 如果下一个操作是从列表中选择，那么很好，否则会显示错误消息并重新关注订单

   <input>

   。

我想我的问题很简单，逻辑是什么？希望我已经包含了足够的信息。

Answer 1

当输入获得焦点并且有值时，显示过滤后的结果。当选择过滤结果之一时，将输入的值设置为等于所选项目。

选择一个值将触发输入的模糊事件。在此输入的模糊事件上，调用一个等待节拍的函数（避免 onblur 触发和所设置的值之间的竞争条件），然后测试输入值是否等于列表中的任何值。如果没有，请告诉用户他们需要输入/选择一个值并将焦点添加回输入。