Twitter Typeahead.js: 点击/聚焦时显示所有选项

简介

Twitter Typeahead.js 是一个强大的自动完成库,可以帮助用户更快地找到他们正在输入的内容。但是,默认情况下,Typeahead.js 只会在用户键入字符时才显示匹配的选项。

在本文中,我们将讨论如何修改 Typeahead.js,以便在用户点击或聚焦到输入框时立即显示所有可用选项。这对于一些特殊场景(例如在移动设备上)非常有用。

实现

要实现此功能,我们需要覆盖 Typeahead.js 的默认行为,并在 click/focus 事件发生时显示所有选项。

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

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

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

  ------ ---
--

首先,我们获取 Typeahead.js 实例,并存储原始的 render 方法。然后,我们覆盖该方法,为每个选项添加一个 click/focus 事件监听器。当用户点击或聚焦到选项时,我们触发 queryChanged 事件,并使用 update 方法更新下拉列表中的所有选项。最后,我们使用 open 方法打开下拉列表,以便用户可以看到所有可用选项。

示例代码

以下是一个完整的示例,展示了如何将此功能添加到您的项目中:

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

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

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

      ------ ---
    --

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