Bootstrap Suggest 搜索建议插件使用详解

Bootstrap Suggest 是一款基于Bootstrap架构的简单易用的搜索建议插件，可以帮助用户更快速、准确地找到他们想要的结果。本文将详细介绍 Bootstrap Suggest 的使用方法，以及如何快速集成到网站中。

1. 基本用法

1.1 引入相关文件

在使用 Bootstrap Suggest 插件之前，需要引入如下三个文件：

<!--Bootstrap CSS-->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">

<!-- Bootstrap Suggest CSS -->
<link rel="stylesheet" type="text/css" href="path/to/bootstrap.suggest.min.css">

<!--jQuery JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!--Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>

<!-- Bootstrap Suggest JS -->
<script src="path/to/bootstrap.suggest.min.js"></script>

以上代码中的 path/to/ 代表插件 CSS 和 JS 文件所放置的路径。

1.2 HTML 结构

<div class="input-group mb-3">
  <input type="text" class="form-control" id="suggest-input" placeholder="Search" aria-label="Search">
  <button class="btn btn-secondary" type="button" id="suggest-btn">Go</button>
</div>

以上 HTML 代码中，使用了 Bootstrap 的 input-group 组件，同时添加了触发搜索的按钮。

1.3 调用插件

初始化插件，只需要如下代码：

$(function() {
  $('#suggest-input').suggest({
    data: ['apple', 'banana', 'orange', 'pear', 'peach'],
  });
});

在这个例子中，输入框的数据源为数组，数组包含了 'apple', 'banana', 'orange', 'pear', 'peach' 等5个元素。当用户在输入框中输入了 'a' 时，会显示一个下拉列表，里面的值与数据源中的元素相关。当用户选择其中一个选项后，可以触发自定义的回调函数，这个函数可以是任何自己定义的 JavaScript 函数。

2. 高级用法

2.1 下拉列表定位

有时候，我们需要将下拉列表放置在输入框的下方，以方便用户查看。这时，我们可以配置 position 参数来解决。

$(function() {
  $('#suggest-input').suggest({
    data: ['apple', 'banana', 'orange', 'pear', 'peach'],
    position: 'bottom',
  });
});

上述代码中，position 参数被设置为 'bottom'，表示下拉列表会放在输入框下方。

2.2 搜素设置

Bootstrap Suggest 也支持不同的搜索设置，比如匹配方式、最小搜索长度等。下面给一个例子：

$(function() {
  $('#suggest-input').suggest({
    data: 'https://api.example.com/search?q=$1',
    delay: 100,
    minLength: 2,
    matchHint: true,
    hintColor: 'lightblue',
    matchType: 'start',
    processData: function(data) {
      return data.results.map(function(result) {
        return result.name;
      });
    },
  });
});

• data 参数的设置变化了：现在的值指定了搜索的 API 地址，并且包含了一个 $1 占位符，后面会由输入的值替代。
• delay 设定了输入延迟的时间，单位为毫秒。
• minLength 设置了最小搜索长度。
• matchHint 在匹配的时候，是否考虑输入框中未选中的文本。
• hintColor 设置匹配到的子串的颜色
• matchType 是匹配类型，这里使用了 'start'，表示字符串必须以输入的内容开头才算匹配。
• processData 是一个自定义数据处理函数，用于格式化 API 返回的数据。

结语

这篇文章展示了 Bootstrap Suggest 的用法，你可以根据自身需求来进行自定义配置。如果你有任何问题或意见，欢迎在下方评论区留言，与我们一起探讨。