JavaScript Select 下拉框
在前端开发中,下拉框是一个常见的 UI 组件。而支持输入模糊查询的下拉框则更为实用,可以大幅提高用户体验。本文将介绍如何利用 JavaScript 实现一个支持输入模糊查询的下拉框,并附带示例代码。
1. HTML 结构
首先,我们需要在 HTML 中添加一个 select
元素和一个 input
元素,用于输入模糊查询的关键字。其中,select
元素中包含多个 option
元素,这些元素将会作为下拉框的选项展示出来。
------- -------------- ------- ---------------------- ---------- ------- ---------------------- ---------- ------- ---------------------- ---------- ------- ---------------------- ---------- ------- ---------------------- ---------- --------- ------ ------------ ------------
2. JavaScript 实现
接下来,我们使用 JavaScript 实现支持模糊查询的下拉框。具体步骤如下:
2.1 获取 DOM 节点
首先,我们需要获取 select
和 input
元素的 DOM 节点,以便后面操作它们。
----- -------- - ------------------------------------ ----- ------- - -----------------------------------
2.2 绑定事件监听器
然后,我们需要为 input
元素绑定一个 keyup
事件监听器。当用户在输入框中输入内容时,该事件将会被触发。
--------------------------------- ---------- - -- ----- --------- ---
2.3 筛选下拉框选项
当用户输入关键字时,我们需要根据关键字筛选出符合条件的下拉框选项,并将它们展示出来。具体实现如下:
-------- ---------------------- - ----- ------- - ----------------- --- ---- - - -- - - --------------- ---- - ----- ---------- - ------------------------------ -- ------------------------------------------ --- --- - ------------------------ - -------- - ---- - ------------------------ - ------- - - - --------------------------------- ---------- - ----- ------- - --------------------- ----------------------- ---
在上面的代码中,我们定义了一个 filterOptions
函数,用于筛选下拉框选项。该函数接收一个关键字作为参数,遍历所有的选项,将符合条件的选项展示出来,不符合条件的选项则隐藏起来。
2.4 动态创建选项
还有一种情况,即用户输入的关键字并不存在于下拉框选项中,这时候我们需要动态创建一个新的选项,并将其展示出来。具体实现如下:
-------- ------------------- ----- - ----- ------ - --------------------------------- ------------ - ------ ----------- - ----- ------ ------- - -------- ---------------- ----- - ----- ------ - ------------------- ------ --------------------- - --------------------------------- ---------- - ----- ------- - --------------------- --- ---------------- - ------ --- ---- - - -- - - ------------------------ ---- - ----- ---------- - --------------------------------------- -- ------------------------------------------ --- --- - --------------------------------- - -------- ---------------- - ----- - ---- - --------------------------------- - ------- - - -- ------------------ -- ------- --- --- - ------------------ --------- - ---
在上面的代码中,我们新增了两
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/2367