JavaScript实现文本框模糊查询与选项下拉功能

在这个文本中，我们探讨的是一个基于JavaScript实现的简单模糊查询功能，适用于一个带有输入框和下拉菜单的选择器。该查询功能主要应用于一个查询框（`.winput`），用户可以在其中输入资源名称，而下拉菜单（`.winputdowntextk`）则会根据输入内容动态显示匹配的选项。 首先，HTML部分包含了一个输入框和一个空的下拉菜单，它们分别用于用户输入和选择。`<input>`元素的`type="text"`属性设置为文本输入，`placeholder`属性提示用户输入资源名称。`<div class="winputdowntextk">`将用于显示匹配的列表项。 在JavaScript部分，定义了两个数组：`fruitlist1`用于存储原始的资源列表，而`fruitlist`将用于存储筛选后的匹配项。`addEventListener`方法监听`input`事件，当用户在输入框中输入内容时，`changeHandle`函数会被调用。 `changeHandle`函数的核心逻辑是遍历`fruitlist1`数组，使用`indexOf`方法检查每个元素是否包含用户输入的关键字。如果找到匹配项且`fruitlist`长度小于3（可能是为了限制下拉菜单的显示项数量），则将匹配的资源添加到`fruitlist`中。当用户停止输入或清空输入框时，`fruitlist`重置为空。 接下来，`for`循环遍历`fruitlist`，创建一个新的`<div>`元素，并将匹配的资源名称作为文本内容。这些新的下拉选项被添加到`winputdowntextk`中。同时，还为每个下拉选项绑定了一个点击事件，当用户点击某项时，会将选中的资源名称赋值给输入框，并清空下拉菜单。 CSS部分没有在这部分内容中展示，但可以想象它可能包含样式规则来定义输入框、下拉菜单以及选中的样式等。 这个例子展示了如何利用JavaScript的基本操作实现一个简单的模糊查询功能，适合于在网站或者应用中提高用户体验，快速查找相关信息。通过监听用户输入，实时过滤并显示相关的下拉选项，提高了数据检索的便捷性。