JS中Select下拉列表类(支持输入模糊查询)功能

阅读时长 5 分钟读完

在前端开发中,下拉列表是常见的表单元素之一。但是,当选项数量过多时,往往不太方便用户查找所需选项。为了更好的用户体验,我们可以加入输入框事件监听和模糊匹配算法,让用户能够通过关键字快速搜索到自己需要的选项。

实现思路

  1. 创建一个HTML元素来显示选择列表,并添加输入框组件。
  2. 在输入框中监听 input 事件。
  3. 获取输入框中的关键字并匹配选择列表中的选项。
  4. 根据匹配结果显示或隐藏每个选项。

实现步骤

HTML结构

-- -------------------- ---- -------
---- ------ ---
------- --------------
    ------- ----------------------
    ------- ----------------------
    ---- ------ ---
---------

---- ----- ---
------ ----------- ---------------- --------------------

JS代码

-- -------------------- ---- -------
----- ------ - ------------------------------------
----- ----- - ---------------------------------------

----- ------- - ---------------------------

------------------------------- ------- -- -
  ----- ------- - ---------------------------------
  
  -- -- ------ -------------------------
  ----------------------- --
      -------------------------------------------
    -
    ----------------- -- -------------- - --------
  
  ----------------------- --
      --------------------------------------------
    -
    ----------------- -- -------------- - -------
---

示例代码

下面是一个完整的示例,你可以在CodePen上查看

-- -------------------- ---- -------
--------- -----
----- ----------
  ------
    ----- --------------- --
    ----- ---------------
          ---------------------------- ------------------ --
    ---------------------------
  -------
  ------
    ------- --------------
      ------- ----------------------
      ------- ----------------------
      ------- ----------------------
      ------- ----------------------
      ------- ----------------------
      ------- ----------------------
      ------- ----------------------
      ------- ----------------------
      ------- ----------------------
      ------- ------------------------
      ------- ------------------------
      ------- ------------------------
      ------- ------------------------
      ------- ------------------------
      ------- ------------------------
      ------- ------------------------
      ------- ------------------------
      ------- ------------------------
      ------- ------------------------
      ------- ------------------------
    ---------

    ------ ----------- ---------------- ------------------- --

    --------
      ----- ------ - ------------------------------------
      ----- ----- - ---------------------------------------

      ----- ------- - ---------------------------

      ------------------------------- ------- -- -
        ----- ------- - ---------------------------------

        ----------------------- --
            -------------------------------------------
          -
          ----------------- -- -------------- - --------

        ----------------------- --
            --------------------------------------------
          -
          ----------------- -- -------------- - -------
      ---
    ---------
  -------
-------

总结

本文介绍了如何使用JavaScript实现带模糊查询的下拉

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/1093

纠错
反馈