使用 Bootstrap Typeahead JS 示例的动态自动完成搜索

在本节中，我们将使用 Bootstrap Typeahead JS，以便我们可以执行动态自动完成搜索。Typeahead 也可以称为自动建议或自动完成。它是一种用于语言预测的工具。许多搜索界面都使用此工具。当客户在搜索栏中输入内容时，他们会得到一些建议。当用户在搜索栏中输入内容时，Typeahead 会提供预测。

现代 Web 表单具有非常流行的搜索工具，即 Typeahead 输入字段。Typeahead 通常用于改善用户体验。该工具会查看用户在搜索内容或填写表格时输入的内容。基于这些内容，Typeahead 会向用户提供提示和可能的选择列表。搜索可以是任何类型。当我们使用 Typeahead 时，我们将减少潜在的错误，并且我们还可以节省时间，因为在使用此功能时，用户拼写错误的次数会减少。

首先，我们将通过使用 ajax.html 文件来创建 html 布局。我们将在 ajax.html 文件中添加 JQuery 和 Bootstrap typeahead 的代码。如果我们尝试在输入框中写入内容，我们将能够获得动态自动完成搜索。这可以通过使用 Ajax 请求来实现。因此，将首先使用以下代码创建 ajax.html 文件

ajax.html

现在我们的示例需要 JSON 数据。我们将通过创建一个新页面并通过 Ajax 请求来获取它。因此，在我们的以下示例中，我们将创建另一个页面 ajaxpro.php 文件。之后，我们将添加以下代码

ajaxpro.php

我们上面的代码已准备好运行。当我们运行此代码时，我们将获得以下输出