typeahead.js 是一个方便的工具，可用于自动完成和搜索提示。虽然它提供了很多配置选项和默认行为，但有时您可能需要以编程方式触发结果的显示。在本文中，我们将深入探讨如何使用代码触发 typeahead.js 的结果显示，并附上示例代码。
实现思路
要以编程方式触发 typeahead.js 的结果显示，我们需要执行以下步骤：
- 获取 typeahead.js 实例
- 调用实例的
open方法 - 如果需要，更新输入框的值以触发搜索
获取 typeahead.js 实例
首先，我们需要获取 typeahead.js 实例。假设您已经初始化了 typeahead.js 输入框并将其存储在变量 inputElement 中。要获取 typeahead.js 实例，请使用以下代码：
const typeaheadInstance = $(inputElement).data("ttTypeahead");此代码利用 jQuery 的 data 方法获取 ttTypeahead 数据。该数据包含所有 typeahead.js 实例的引用。请注意，如果您未使用 jQuery，则可以使用 typeahead.js 提供的 $(element).typeahead('get') 方法来获取实例。
调用实例的 open 方法
接下来，我们需要调用 typeahead.js 实例的 open 方法来显示搜索结果。 open 方法接受一个可选参数，该参数指定要搜索的字符串。如果未提供参数，则将使用当前输入框的值进行搜索。
typeaheadInstance.open();
更新输入框的值以触发搜索
如果您想在显示搜索结果时更新输入框的值，则需要在调用 open 方法之前先更新输入框的值。这将确保 typeahead.js 执行搜索操作并显示正确的结果。以下代码更新输入框的值：
$(inputElement).val("搜索关键词");完整示例代码
下面是一个完整的示例代码，演示了如何以编程方式触发 typeahead.js 的结果显示：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
------------------- ---------------
----- ---------------- ---------------------------------------------------------------------------------------------
------- -----------------------------------------------------------
------- --------------------------------------------------------------------------------------------------
-------
------
---- ---------------- ------
---------------- ------------
------ ------------ ----------- ------------------------
------- --------------------- ------ ----------------
------
--------
---------------------------- -
----- ------ - --------- --------- --------- -------- ----------
----- ------------ - --------------
-- ---------- ------------ ---- ---- -------
------------------------
----- -----
---------- -----
---------- --
--
-
----- ---------
------- --------------- ------------ ------------- -
------------------------------- -- -----------------------
-
---
-- ------- ------ ------- ---- ------ -- -------
------------------------------- -
----- ----------------- - ---------------------------------
------------------------
-------------------------
---
---
---------
-------
-------该示例代码使用 typeahead.js 初始化输入框，并在单击按钮时以编程方式触发搜索结果的显示。请注意，我们在构造函数中传入了一些选项，例如 hint、highlight 和 minLength。此外，我们还定义了一个名为 myData 的数据源，并在其中添加了一些示例数据。在触发按钮单击事件时，我们获取 typeahead.js 实例并更新输入框的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28436