使用 Express.js 和 AngularJS 开发带自动补全的搜索框-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用中，搜索框是非常常见的功能之一。而自动补全功能则可以极大地提升用户体验，让用户能够更快速、更准确地找到他们所需的内容。本文将介绍如何使用 Express.js 和 AngularJS 开发带自动补全的搜索框，并提供示例代码和指导意义。

技术栈

在本文中，我们将使用以下技术来开发带自动补全的搜索框：

Express.js：一个基于 Node.js 的 Web 应用框架，用于处理 HTTP 请求和响应。
AngularJS：一个流行的前端 JavaScript 框架，用于构建动态 Web 应用。
Bootstrap：一个流行的前端 UI 框架，用于快速构建美观的用户界面。
jQuery：一个流行的 JavaScript 库，用于简化 DOM 操作和事件处理。

实现步骤

下面是实现带自动补全的搜索框的大致步骤：

创建一个 Express.js 应用程序，并设置路由处理程序来响应搜索请求。
在 AngularJS 中创建一个搜索框指令，并在其中实现自动补全功能。
使用 Bootstrap 和 jQuery 来设计和实现搜索框的外观和交互效果。
使用 AJAX 技术来向服务器发送搜索请求，并获取搜索结果。

下面将逐步介绍这些步骤的具体实现方法。

1. 创建 Express.js 应用程序

首先，我们需要创建一个 Express.js 应用程序，并设置路由处理程序来响应搜索请求。具体来说，我们需要实现以下两个路由：

GET /api/search：用于处理搜索请求，并返回匹配的搜索结果。
GET /api/suggestions：用于处理自动补全请求，并返回匹配的建议列表。

以下是一个简单的 Express.js 应用程序的示例代码：

// www.javascriptcn.com code example
const express = require('express');
const app = express();

// 处理静态文件请求
app.use(express.static('public'));

// 处理搜索请求
app.get('/api/search', (req, res) => {
  const query = req.query.q;
  // 在数据库中搜索匹配的结果
  const results = search(query);
  res.json(results);
});

// 处理自动补全请求
app.get('/api/suggestions', (req, res) => {
  const prefix = req.query.q;
  // 在数据库中搜索匹配的建议列表
  const suggestions = suggest(prefix);
  res.json(suggestions);
});

app.listen(3000, () => {
  console.log('Express app listening on port 3000');
});

2. 在 AngularJS 中创建搜索框指令

接下来，我们需要在 AngularJS 中创建一个搜索框指令，并在其中实现自动补全功能。具体来说，我们需要实现以下功能：

监听用户输入事件，并向服务器发送自动补全请求。
在搜索框下方显示自动补全建议列表，并支持用户点击选择建议项。
监听用户提交事件，并向服务器发送搜索请求，并在搜索结果页面中显示搜索结果。

以下是一个简单的搜索框指令的示例代码：

// www.javascriptcn.com code example
app.directive('searchBox', function($http) {
  return {
    restrict: 'E',
    scope: {},
    template: `
      <div class="input-group">
        <input type="text" class="form-control" ng-model="query" ng-change="autocomplete()" ng-keydown="keydown($event)">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="button" ng-click="search()">搜索</button>
        </div>
      </div>
      <div class="suggestions" ng-show="showSuggestions">
        <ul>
          <li ng-repeat="suggestion in suggestions" ng-click="select(suggestion)">{{suggestion}}</li>
        </ul>
      </div>
    `,
    link: function(scope, elem, attrs) {
      scope.query = '';
      scope.suggestions = [];
      scope.showSuggestions = false;

      scope.autocomplete = function() {
        $http.get('/api/suggestions', {params: {q: scope.query}})
          .then(function(response) {
            scope.suggestions = response.data;
            scope.showSuggestions = true;
          });
      };

      scope.select = function(suggestion) {
        scope.query = suggestion;
        scope.showSuggestions = false;
      };

      scope.search = function() {
        window.location.href = '/search?q=' + scope.query;
      };

      scope.keydown = function(event) {
        if (event.keyCode === 13) {
          scope.search();
        }
      };
    }
  };
});

3. 使用 Bootstrap 和 jQuery 设计搜索框样式和交互效果

接下来，我们需要使用 Bootstrap 和 jQuery 来设计和实现搜索框的外观和交互效果。具体来说，我们需要实现以下效果：

设计搜索框的样式，包括输入框、按钮和建议列表的布局和样式。
实现搜索框的交互效果，包括输入框获得焦点时显示建议列表、点击建议项时更新输入框内容、点击搜索按钮时提交搜索请求等。

以下是一个简单的搜索框样式和交互效果的示例代码：

// www.javascriptcn.com code example
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <h1>搜索</h1>
      <search-box></search-box>
    </div>
  </div>
</div>

<style>
input.form-control {
  border-radius: 0;
}
.suggestions {
  position: absolute;
  z-index: 1;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-top: none;
  background-color: #fff;
}
.suggestions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.suggestions li {
  cursor: pointer;
  padding: 5px 10px;
  white-space: nowrap;
}
.suggestions li:hover {
  background-color: #f5f5f5;
}
</style>

<script>
$(function() {
  $('input.form-control').focus(function() {
    $(this).parent().next('.suggestions').show();
  });

  $('input.form-control').blur(function() {
    $(this).parent().next('.suggestions').hide();
  });

  $('body').on('click', '.suggestions li', function() {
    var suggestion = $(this).text();
    $('input.form-control').val(suggestion);
    $('.suggestions').hide();
  });
});
</script>

4. 使用 AJAX 向服务器发送搜索请求

最后，我们需要使用 AJAX 技术来向服务器发送搜索请求，并获取搜索结果。具体来说，我们需要在搜索框指令中实现以下功能：

监听用户提交事件，并向服务器发送搜索请求。
在搜索结果页面中显示搜索结果。

以下是一个简单的搜索结果页面的示例代码：

// www.javascriptcn.com code example
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <h1>搜索结果</h1>
      <p>搜索关键词：{{query}}</p>
      <ul>
        <li ng-repeat="result in results">{{result}}</li>
      </ul>
    </div>
  </div>
</div>

<script>
app.controller('SearchResultsController', function($scope, $http) {
  $scope.query = getQueryString('q');
  $http.get('/api/search', {params: {q: $scope.query}})
    .then(function(response) {
      $scope.results = response.data;
    });

  function getQueryString(name) {
    var regex = new RegExp('[?&]' + name + '=([^&#]*)');
    var results = regex.exec(window.location.href);
    if (results === null) {
      return '';
    } else {
      return decodeURIComponent(results[1].replace(/\+/g, ' '));
    }
  }
});
</script>

学习和指导意义

本文介绍了如何使用 Express.js 和 AngularJS 开发带自动补全的搜索框，并提供了示例代码和指导意义。这些技术可以帮助开发者更快速地构建现代 Web 应用，并提升用户体验。

具体来说，本文涵盖了以下内容：

如何使用 Express.js 创建一个 Web 应用程序，并处理 HTTP 请求和响应。
如何使用 AngularJS 创建一个搜索框指令，并实现自动补全功能。
如何使用 Bootstrap 和 jQuery 设计搜索框的样式和交互效果。
如何使用 AJAX 技术向服务器发送搜索请求，并获取搜索结果。

通过学习本文，开发者可以掌握以上技术，并将其应用于实际项目中。同时，本文也提供了示例代码和指导意义，可以帮助开发者更好地理解和应用这些技术。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d8cc69a941bf7134f60fae

使用 Express.js 和 AngularJS 开发带自动补全的搜索框

技术栈