在前端开发中，有时需要使用自动完成搜索栏。Typeahead 是一个流行的 JavaScript 库，它可以帮助我们实现这个功能。默认情况下，Typeahead 将从 JSON 数据源中的 displayKey 属性中获取数据并将其显示在搜索框中。但是，在某些情况下，我们可能想要显示不同的值。本文将介绍如何从 JSON 数据源中使用不同的值来代替 displayKey。
如何使用不同的值？
Typeahead 提供了一个名为 datumTokenizer 的函数，该函数定义了如何将每个条目转换为用于搜索的令牌。默认情况下，该函数使用 displayKey 属性的值。然而，我们可以通过覆盖此函数来实现使用不同的属性。
例如，假设我们有以下 JSON 数据:
-- -------------------- ---- -------
-
-
----- --
------- ----- -----
-------- ---------------------
--
-
----- --
------- ----- -------
-------- -----------------------
-
-如果我们想在 Typeahead 中显示每个条目的电子邮件地址而不是名称，我们可以编写以下代码：
-- -------------------- ---- -------
----- ------ - --- ------------
--------------- ------- -- -
------ ----------------------------------------------
--
--------------- ---------------------------------
------ ----
---
-----------------------------
----- -----
---------- -----
---------- -
--
-
----- ---------
------- -------
-------- ------- -- -
------ ------------
-
---在上面的代码中，我们创建了一个新的 Bloodhound 实例，并覆盖了 datumTokenizer 函数。该函数使用每个条目的 email 属性来生成搜索令牌。然后，我们将该实例用作 Typeahead 的源，并覆盖 display 函数来指定要显示在搜索框中的值。
深入学习
Typeahead 是一个强大的工具，提供了许多其他选项和配置。如果您想深入学习，请参考官方文档：https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md
结论
本文介绍了如何从 JSON 数据源中使用不同的值来代替 Typeahead 中的默认 displayKey 属性。通过覆盖 datumTokenizer 和 display 函数，我们可以轻松地实现此目标。希望这篇文章能够帮助您更好地理解 Typeahead 并在实际应用中发挥出色的作用。
以上是本文的全部内容，感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30019