집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript를 사용하여 텍스트 입력 상자에 실시간 검색 기능을 구현하는 방법은 무엇입니까?

JavaScript를 사용하여 텍스트 입력 상자에 실시간 검색 기능을 구현하는 방법은 무엇입니까?

PHPz원래의: 2023-10-24 11:33:451308검색

如何使用 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 파일에 실시간 검색 기능을 구현해 보겠습니다. 코드는 다음과 같습니다.

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

코드 분석:

먼저 getElementById 메소드를 통해 텍스트 입력 상자 및 검색 결과 컨테이너에 대한 참조를 얻습니다. getElementById 方法获取文本输入框和搜索结果容器的引用。
接着，通过 addEventListener 方法监听输入框的 input 事件，也就是输入内容发生改变时的事件。
在事件处理函数中，首先清空搜索结果容器，然后通过 input.value 获取输入框的值，并调用 search 函数进行搜索。
search 函数是一个简单的模拟搜索接口，它通过遍历一个存储固定数据的数组，根据输入框的值进行匹配，并返回匹配的结果数组。
最后，showResults

addEventListener

input

이벤트 처리 함수에서는 먼저 검색 결과 컨테이너를 비운 다음 input.value를 통해 입력 상자의 값을 가져온 다음 search 함수를 호출하여 검색합니다.

search 함수는 고정된 데이터를 저장하는 배열을 탐색하고 입력 상자의 값에 따라 일치하며 일치하는 결과의 배열을 반환하는 간단한 시뮬레이션 검색 인터페이스입니다.

마지막으로 showResults 함수는 검색 결과 배열을 순회하여 검색 결과 컨테이너에 검색 결과를 동적으로 생성하고 표시합니다. 🎜🎜🎜위 코드를 통해 텍스트 입력창에 간단한 실시간 검색 기능을 구현해봤습니다. 사용자가 입력 상자에 내용을 입력하면 페이지에 관련 검색 결과가 빠르게 표시됩니다. 실제 데이터를 얻기 위해 AJAX를 사용하여 백엔드 인터페이스를 요청하거나 보다 복잡한 검색 알고리즘을 구현하는 등 실제 필요에 따라 검색 논리를 최적화하고 사용자 정의할 수 있습니다. 🎜🎜요약: 🎜이 글에서는 JavaScript를 사용하여 텍스트 입력 상자의 실시간 검색 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 실시간 검색 기능을 통해 사용자 경험이 향상될 수 있으며, 사용자가 콘텐츠를 입력할 때 관련 검색 결과를 빠르게 얻을 수 있습니다. 이 글이 웹페이지 검색 기능을 개발할 때 도움이 되기를 바랍니다. 🎜

위 내용은 JavaScript를 사용하여 텍스트 입력 상자에 실시간 검색 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript ajax html 接口事件 input 算法

성명：

이전 기사：HTML, CSS, jQuery: 부드러운 스크롤을 위한 팁다음 기사：HTML, CSS, jQuery: 부드러운 스크롤을 위한 팁