Home > Article > Web Front-end > How to use JavaScript to implement real-time search function in text input box?

How to use JavaScript to implement real-time search function in text input box?

PHPzOriginal: 2023-10-24 11:33:451191browse

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

With the development of the Internet, the search function has become an indispensable part of web design. Real-time search for text input boxes is a user-friendly way to quickly provide relevant results as the user types, improving the user experience. This article will introduce how to use JavaScript to implement the real-time search function of the text input box and provide specific code examples.

First, add a text input box and a container for displaying search results in the HTML file. The code is as follows:

<!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>

Next, implement the real-time search function in the JavaScript file. The code is as follows:

// 获取文本输入框和搜索结果容器
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);
  }
}

Code analysis:

First, we obtain references to the text input box and search result container through the getElementById method.
Next, listen to the input event of the input box through the addEventListener method, which is the event when the input content changes.
In the event handling function, first clear the search result container, then get the value of the input box through input.value, and call the search function to search.
search The function is a simple simulated search interface. It traverses an array that stores fixed data, matches according to the value of the input box, and returns an array of matching results.
Finally, the showResults function traverses the search results array and dynamically creates and displays the search results in the search results container.

Through the above code, we have implemented a simple real-time search function in the text input box. When the user enters content in the input box, the page will quickly display relevant search results. You can optimize and customize the search logic according to actual needs, such as using AJAX to request the backend interface to obtain actual data, or implement more complex search algorithms.

Summary:
This article introduces how to use JavaScript to implement the real-time search function of the text input box, and provides specific code examples. Through this real-time search function, the user experience can be improved, allowing users to quickly obtain relevant search results when typing content. I hope this article will be helpful to you when developing search functions for web pages.

The above is the detailed content of How to use JavaScript to implement real-time search function in text input box?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript ajax html 接口事件 input 算法

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML, CSS, and jQuery: Tips for smooth scrollingNext article：HTML, CSS, and jQuery: Tips for smooth scrolling

See more

How to use JavaScript to implement real-time search function in text input box?

Related articles