SQL 데이터베이스에 대해 동적으로 채워진 목록 항목이 있는 검색 표시줄이 있는 HTML 드롭다운 양식

5885 단어 javascripthtmlphpcss
많은 웹 사이트에서 HTML 양식을 사용하여 양식에서 제출한 입력 값을 기반으로 사용자 데이터를 얻거나 결과를 표시하고 있습니다. 내 요구 사항은 내 웹 사이트에서 성공적으로 구현한 검색 기능이 있는 HTML 드롭다운 양식이었습니다. 검색 표시줄은 내 프로젝트FPS Calculator에서 구현된 대로 100개 이상의 항목이 포함된 드롭다운 목록을 검색하는 데 정말 유용합니다.

목록에 있는 모든 항목을 이름으로 필터링하는 JavaScript를 사용하여 검색 기능을 작동할 수 있었습니다. 많은 YouTube 동영상을 참조하여 필요한 결과를 얻을 수 있었습니다.

이 양식 검색은 외부 API 호출이 없고 브라우저에서 실행되는 간단한 JavaScript 기능에서 작동합니다. 따라서 성능이 저하되지 않고 페이지 로드 속도가 매우 빠릅니다. JavaScript 코드는 아래와 같습니다.

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");

const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => {
  optionsContainer.classList.toggle("active");

  searchBox.value = "";
  filterList("");

  if (optionsContainer.classList.contains("active")) {
    searchBox.focus();
  }
});

optionsList.forEach(o => {
  o.addEventListener("click", () => {
    selected.innerHTML = o.querySelector("label").innerHTML;
    optionsContainer.classList.remove("active");
  });
});

searchBox.addEventListener("keyup", function(e) {
  filterList(e.target.value);
});

const filterList = searchTerm => {
  searchTerm = searchTerm.toLowerCase();
  optionsList.forEach(option => {
    let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
    if (label.indexOf(searchTerm) != -1) {
      option.style.display = "block";
    } else {
      option.style.display = "none";
    }
  });
};


JavaScript는 CSS의 div 클래스를 대상으로 합니다. 또한 내 프로젝트에서 사용한 샘플 style.css를 첨부하여 JavaScript에서 내 div 클래스 대상을 매핑하는 것이 더 쉬울 것입니다.

/* Searchbox */

.search-box input {
  width: 100%;
  padding: 12px 16px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  position: absolute;
  border-radius: 8px 8px 0 0;
  z-index: 100;
  border: 8px solid #2f3640;

  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
}

.search-box input:focus {
  outline: none;
}

.select-box .options-container.active ~ .search-box input {
  opacity: 1;
  pointer-events: auto;
}


위의 CSS와 JavaScript를 HTML 드롭다운 형태로 활용하면 검색 기능이 있는 검색창을 쉽게 구현할 수 있습니다.

HTML 드롭다운 양식 디자인



HTML 양식은 라디오 입력 옵션을 사용하여 선택한 값을 가져옵니다. 라디오 입력 방식을 사용하기 때문에 다중 항목 선택이 불가능합니다.

라디오 선택 옵션은 이름 컨테이너가 있는 div 내부에 배치됩니다. CSS에서 컨테이너 클래스는 스크롤 막대가 있는 스크롤 가능한 목록으로 작동하도록 설계되었습니다. 이것은 앞에서 언급한 검색 상자 표시줄과 결합됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
  <body>
    <div class="container">
      <h2>Video Category</h2>

      <div class="select-box">
        <div class="options-container">
          <div class="option">
            <input
              type="radio" class="radio" id="automobiles" name="category"/>
            <label for="automobiles">Automobiles</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" id="film" name="category" />
            <label for="film">Film & Animation</label>
          </div>
</div>

        <div class="selected">
          Select Video Category
        </div>

        <div class="search-box">
          <input type="text" placeholder="Start Typing..." />
        </div>
      </div>
    </div>
  </body>
</html>


위의 HTML 코드는 라디오 선택 입력 유형을 사용합니다. 검색 상자 표시줄의 경우 검색 상자 클래스가 있는 div에서 간단한 입력 유형 텍스트가 사용됩니다. 검색 상자 CSS는 검색 기능을 구현하기 위해 위에서 언급한 JavaScript와 함께 설계되었습니다.

데이터베이스의 SQL 테이블에서 목록 항목을 동적으로 가져오는 PHP 코드



이 프로젝트에는 WordPress가 사용됩니다. 따라서 $wpdb와 같은 기본 WordPress 데이터베이스 기능이 사용됩니다. 양식 선택 입력 유형 div는 아래 PHP 코드와 같이 for 루프로 래핑됩니다.

<div class="formcontainer">
      <form action="" method="GET">
      <div class="select-box">
        <div class="options-container">
          <?php
          foreach( $result as $value ) { ?>
          <div class="option">
            <input
              type="radio" class="radio" id="<?php echo $value->game_name; ?>" name="game" value="<?php echo $value->game_name; ?>" />
            <label for="<?php echo $value->game_name; ?>"><?php echo $value->game_name; ?></label>
            </div>
            <?php
            }
          ?>
        </div>


목록 항목을 포함하는 테이블 열은 $wpdb 함수 및 SQL 명령을 사용하여 선택됩니다. SQL 명령의 배열은 $result 변수에 저장됩니다. for 루프 $result $value 조건이 사용됩니다. 라디오 옵션의 이름은 데이터베이스 테이블 열 이름과 함께 php echo $value를 사용하여 표시됩니다.

for 루프는 데이터베이스의 각 열 셀에 대해 라디오 입력 유형을 반복했습니다. 따라서 테이블 열의 모든 항목을 동적으로 표시합니다. 앞으로 SQL 데이터베이스 테이블에서 열이 업데이트되면 for 루프는 열에 새로 입력된 값을 동적으로 표시합니다.

아래에 이 드롭다운 양식을 개발하는 데 사용한 모든 참조를 첨부했습니다.
유튜브 영상 -
GitHub - https://github.com/Godsont/Custom-Select-Box-with-Search
js 문자 가 한자 인지 아 닌 지 를 판단 하 는 두 가지 방법 소결
일반 비트 연산

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage