如何使用 JavaScript 实现文本输入框实时搜索功能？-js教程-PHP中文网

如何使用 JavaScript 实现文本输入框实时搜索功能？

PHPz

发布： 2023-10-24 11:33:45

原创

2447人浏览过

如何使用 javascript 实现文本输入框实时搜索功能？

如何使用 JavaScript 实现文本输入框实时搜索功能？

随着互联网的发展，搜索功能已经成为网页设计中不可或缺的一部分。对于文本输入框进行实时搜索是用户友好的一种方式，它可以在用户输入时快速提供相关结果，提高用户体验。本文将介绍如何使用 JavaScript 实现文本输入框实时搜索功能，并提供具体代码示例。

首先，在 HTML 文件中添加一个文本输入框和一个用于展示搜索结果的容器。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>实时搜索</title>
</head>
<body>
  <input type="text" id="search-input" placeholder="请输入关键字">
  <div id="search-results"></div>

<script src="script.js"></script>
</body>
</html>

登录后复制

接下来，在 JavaScript 文件中实现实时搜索功能。代码如下：

立即学习“Java免费学习笔记（深入）”；

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情

// 获取文本输入框和搜索结果容器
var input = document.getElementById('search-input');
var resultsContainer = document.getElementById('search-results');

// 监听输入框的输入事件
input.addEventListener('input', function() {
  // 清空搜索结果容器
  resultsContainer.innerHTML = '';

  // 获取输入框的值
  var query = input.value;

  // 进行搜索
  var results = search(query);

  // 展示搜索结果
  showResults(results);
});

function search(query) {
  // 这里可以使用 AJAX 请求后端接口，获取相关搜索结果
  // 在示例中，我们使用一个简单的字符串匹配方式来模拟搜索结果
  var data = ['JavaScript', 'Java', 'Python', 'HTML', 'CSS'];
  var results = [];

  for (var i = 0; i < data.length; i++) {
    if (data[i].toLowerCase().indexOf(query.toLowerCase()) !== -1) {
      results.push(data[i]);
    }
  }

  return results;
}

function showResults(results) {
  // 遍历搜索结果，并在搜索结果容器中展示
  for (var i = 0; i < results.length; i++) {
    var result = document.createElement('div');
    result.textContent = results[i];
    resultsContainer.appendChild(result);
  }
}

登录后复制

代码解析：