Bootstrap typeahead ajax 结果格式 - 示例

Ajax

# 使用Bootstrap Typeahead Ajax实现自动补全搜索功能

在Web开发中，搜索框的自动补全功能是提高用户体验的重要组成部分之一。Bootstrap Typeahead Ajax是一种流行的工具，它通过Ajax请求从服务器获取搜索建议，使搜索变得更加智能和快速。在本文中，我们将探讨Bootstrap Typeahead Ajax的使用方式，并提供一个简单而实用的示例代码。

## 引入Bootstrap和Typeahead库

首先，确保你的项目中引入了Bootstrap和Typeahead的相关库。你可以通过CDN或下载它们的本地文件来实现。在HTML文件的标签中添加以下代码：

html
<link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/CSS/bootstrap.min.CSS">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/popper.JS/1.12.9/umd/popper.min.JS"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/JS/bootstrap.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.JS"></script>

## 配置Typeahead并发起Ajax请求

接下来，我们需要配置Typeahead，以便它能够通过Ajax请求从服务器获取搜索建议。在你的JavaScript文件中添加以下代码：

Javascript
$(document).ready(function() {
  $('#search-box').typeahead({
    source: function(query, process) {
      return $.Ajax({
        url: '/api/search', // 替换为你的服务器端搜索接口
        type: 'GET',
        data: { query: query },
        dataType: 'JSon',
        success: function(data) {
          return process(data);
        }
      });
    }
  });
});

在这个例子中，我们假设服务器端的搜索接口为/api/search，并且该接口接受一个名为query的参数。请根据你的实际情况修改这些值。

## 服务器端返回格式

服务器端应该返回一个JSON格式的数组，包含与用户查询匹配的建议项。每个建议项可以包括显示文本和值。

JSon
[
  { "value": 1, "text": "搜索结果1" },
  { "value": 2, "text": "搜索结果2" },
  // ...
]

## 实际案例

现在，让我们通过一个简单的例子来演示如何在实际项目中使用Bootstrap Typeahead Ajax。假设我们正在开发一个书籍搜索功能。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Typeahead Ajax示例</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/CSS/bootstrap.min.CSS">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/popper.JS/1.12.9/umd/popper.min.JS"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/JS/bootstrap.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.JS"></script>
  <script>
    $(document).ready(function() {
      $('#book-search').typeahead({
        source: function(query, process) {
          return $.Ajax({
            url: '/api/books', // 替换为你的书籍搜索接口
            type: 'GET',
            data: { query: query },
            dataType: 'JSon',
            success: function(data) {
              return process(data);
            }
          });
        }
      });
    });
  </script>
</head>
<body>
  <div class="contAIner mt-4">
    <h2>书籍搜索</h2>
    <input type="text" id="book-search" class="form-control" placeholder="输入书名">
  </div>
</body>
</html>

在这个例子中，我们创建了一个简单的页面，包含一个输入框用于搜索书籍。当用户在输入框中输入文字时，Typeahead会向服务器端发起Ajax请求，获取匹配的书籍建议并显示在下拉菜单中。

通过使用Bootstrap Typeahead Ajax，我们可以轻松实现搜索框的自动补全功能，提升用户体验。记得根据你的项目需求调整代码中的接口地址和返回格式。希望这个简单的示例能够帮助你快速集成这一功能到你的Web应用中。