집 >웹 프론트엔드 >JS 튜토리얼 >HTML, CSS 및 jQuery를 사용하여 동적 효과가 있는 검색 상자를 만드는 방법

HTML, CSS 및 jQuery를 사용하여 동적 효과가 있는 검색 상자를 만드는 방법

王林원래의: 2023-10-25 10:28:571222검색

현대 웹 개발에서 일반적으로 필요한 것은 동적 효과가 있는 검색 상자를 만드는 것입니다. 이 검색창은 실시간으로 추천 검색어를 표시하고 사용자가 입력할 때 자동으로 키워드를 완성할 수 있습니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 이러한 검색 상자를 구현하는 방법을 자세히 소개합니다.

HTML 구조 만들기

먼저 기본 HTML 구조를 만들어야 합니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态搜索框</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <h1>动态搜索框</h1>
    <input type="text" id="search-input" placeholder="请输入关键词">
    <ul id="suggestion-list"></ul>
  </div>

  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

이 HTML 구조에는 제목과 검색용 입력 상자가 포함된 컨테이너 div가 포함되어 있습니다. 또한 검색 제안을 표시하는 ul 요소도 만들었습니다.

CSS 스타일 작성

다음으로 CSS 스타일을 작성하여 검색창에 몇 가지 기본 스타일을 추가하여 검색창을 더욱 아름답게 만들어야 합니다. 코드는 다음과 같습니다.

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

h1 {
  font-size: 24px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

#suggestion-list {
  text-align: left;
  list-style-type: none;
  padding: 0;
  display: none;
}

#suggestion-list li {
  padding: 10px;
  background-color: #f2f2f2;
  cursor: pointer;
}

#suggestion-list li:hover {
  background-color: #e3e3e3;
}

이 CSS 스타일은 컨테이너, 제목, 입력 상자 및 검색 제안 목록에 적절한 스타일을 추가하여 더욱 전문적으로 보이도록 합니다.

검색 제안 기능 추가

이제 jQuery를 사용하여 검색 제안 기능을 구현해야 합니다. 코드는 다음과 같습니다.

$(document).ready(function() {
  $('#search-input').keyup(function() {
    var keyword = $(this).val();
    if (keyword !== '') {
      $.ajax({
        url: 'suggestion.php',
        type: 'POST',
        data: { keyword: keyword },
        success: function(data) {
          if (data.trim() !== '') {
            $('#suggestion-list').html(data).show();
          } else {
            $('#suggestion-list').html('').hide();
          }
        }
      });
    } else {
      $('#suggestion-list').html('').hide();
    }
  });

  $(document).on('click', '#suggestion-list li', function() {
    var suggestion = $(this).text();
    $('#search-input').val(suggestion);
    $('#suggestion-list').html('').hide();
  });
});

이 코드는 먼저 입력 상자의 키보드 이벤트를 수신합니다. 사용자가 입력하면 AJAX를 사용하여 presents.php라는 백엔드 파일에 요청을 보내고 사용자가 입력한 키워드를 전달합니다. 백엔드에. 백엔드는 해당 검색 제안을 반환하고 프런트엔드는 반환된 데이터를 기반으로 검색 제안 목록을 동적으로 업데이트합니다.

사용자가 추천 검색 목록의 항목을 클릭하면 해당 항목의 내용이 입력 상자에 채워지고 추천 검색 목록이 숨겨집니다.

백엔드 코드 작성(suggestion.php)

백엔드 코드는 PHP나 다른 서버측 언어를 사용하여 구현할 수 있습니다. 여기서는 PHP를 예로 들어 간단한 샘플 코드를 보여줍니다.

<?php
$keyword = $_POST['keyword'];

// 从数据库或其他数据源获取搜索建议
$suggestions = array(
  '苹果',
  '香蕉',
  '橙子',
  '草莓',
  '葡萄',
  '西瓜',
  '梨',
  '柚子'
);

$output = '';
foreach ($suggestions as $s) {
  if (strpos($s, $keyword) !== false) {
    $output .= '<li>' . $s . '</li>';
  }
}

echo $output;
?>

이 코드는 프런트 엔드에서 전달된 키워드를 수신하고 키워드를 기반으로 데이터베이스 또는 기타 데이터 소스에서 일치하는 검색 제안을 얻습니다. 그런 다음 제안 사항은 필요한 형식으로 HTML 목록 항목에 연결되어 프런트 엔드로 반환됩니다.

위 코드를 해당 파일로 저장하고 해당 CSS 및 JavaScript 라이브러리를 가져온 후 브라우저를 열고 HTML 파일을 실행하면 동적 효과가 있는 검색창이 나타납니다.

요약

HTML, CSS, jQuery를 사용하면 동적 효과가 있는 검색 상자를 쉽게 만들 수 있습니다. 사용자 입력을 모니터링하고, AJAX 요청을 백엔드로 보내 검색 제안을 얻고, 검색 제안 목록을 동적으로 업데이트함으로써 사용자는 검색 제안을 쉽게 선택하거나 키워드를 직접 입력하여 검색할 수 있습니다. 이 검색창은 사용자에게 더 나은 경험을 제공하기 위해 다양한 웹사이트의 검색 기능에 사용될 수 있습니다.

위 내용은 HTML, CSS 및 jQuery를 사용하여 동적 효과가 있는 검색 상자를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript jquery css ajax html 事件键盘事件 ul 数据库

성명：

이전 기사：HTML, CSS 및 jQuery를 사용하여 고급 양식 자동 완성 기능을 구현하는 방법다음 기사：HTML, CSS 및 jQuery를 사용하여 고급 양식 자동 완성 기능을 구현하는 방법