📌  相关文章
📜  如何使用 Bootstrap Typeahead 创建动态自动完成搜索？(1)

📅  最后修改于: 2023-12-03 15:37:57.872000             🧑  作者: Mango

如何使用 Bootstrap Typeahead 创建动态自动完成搜索？

Bootstrap Typeahead 是一个 Bootstrap 框架扩展，它可以根据用户输入实时地搜索并建议匹配项。在这篇文章中，我们将介绍如何使用 Bootstrap Typeahead 来创建动态自动完成搜索。

步骤
步骤 1：引入必要的文件

在开始之前，我们需要先引入必要的文件。请确保您已安装了最新版本的 Bootstrap 和 jQuery，并将以下文件添加到您的 HTML 页面中：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
步骤 2：创建输入框

我们需要添加一个输入框，这样用户就可以输入他们的搜索条件。我们可以使用 Bootstrap 的样式来美化输入框。以下是一个基本的示例：

<div class="form-group">
  <label for="search-input">搜索：</label>
  <input type="text" class="form-control" id="search-input" placeholder="输入搜索条件...">
</div>
步骤 3：准备数据

为了让 Typeahead 能够实时搜索，我们需要提供一个列表（数组）来存储所有匹配项。在这个例子中，我们将使用一个包含以下内容的数组：

var countries = [
  "阿尔巴尼亚",
  "阿尔及利亚",
  "美国",
  "安道尔",
  "安哥拉",
  "安提瓜和巴布达",
  "阿根廷",
  "亚美尼亚",
  "澳大利亚",
  "奥地利",
  "阿塞拜疆"
];
步骤 4：初始化 Typeahead

现在我们已准备好开始初始化 Typeahead。以下是触发 Typeahead 的 JavaScript 代码：

$(document).ready(function(){
  // 初始化 Typeahead
  $('#search-input').typeahead({
    source: countries
  });
});
步骤 5：测试

现在您已准备好使用 Typeahead 搜索了。当您在输入框中输入一个字符时，Typeahead 将会显示所有匹配项的下拉列表。以下是完整的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typeahead 示例</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="form-group">
      <label for="search-input">搜索：</label>
      <input type="text" class="form-control" id="search-input" placeholder="输入搜索条件...">
    </div>
  </div>
  <script>
    var countries = [
      "阿尔巴尼亚",
      "阿尔及利亚",
      "美国",
      "安道尔",
      "安哥拉",
      "安提瓜和巴布达",
      "阿根廷",
      "亚美尼亚",
      "澳大利亚",
      "奥地利",
      "阿塞拜疆"
    ];

    $(document).ready(function(){
      $('#search-input').typeahead({
        source: countries
      });
    });
  </script>
</body>
</html>
总结

在本文中，我们介绍了如何使用 Bootstrap Typeahead 来创建动态自动完成搜索。为了开始搜索，我们需要先添加一个输入框，然后准备一个数据源，最后初始化 Typeahead 插件。当用户输入一个字符时，Typeahead 将会显示所有匹配项的下拉列表。