[ASP, AJAX] 메뉴 검색 기능

- 사용자 입력: 사용자가 검색 입력창에 텍스트를 입력할 때마다 onkeyup 이벤트가 발생하고, searchMenu() 함수가 호출됩니다.
- AJAX 요청: searchMenu() 함수는 입력된 검색어를 서버로 보내기 위해 AJAX 요청을 생성합니다. 이 요청은 search.asp 파일로 전달됩니다.
- 서버 측 처리: search.asp 파일에서 데이터베이스에 연결하여 입력된 검색어에 맞는 메뉴를 조회하고, 해당 결과를 HTML로 반환합니다.
- 결과 출력: 서버에서 반환된 HTML이 results라는 <div> 요소에 표시되어, 검색 결과가 실시간으로 페이지에 나타납니다.

이렇게 구현하면 사용자가 검색어를 입력할 때마다 실시간으로 하단에 검색 결과가 표시되며, 해당 메뉴를 클릭하면 그 메뉴로 이동할 수 있습니다.

document.getElementById("results").innerHTML을 통해 검색 결과를 동적으로 추가하고 나서 해당 결과의 스타일을 변경하려면, innerHTML을 사용하여 HTML을 삽입한 후에 JavaScript나 CSS를 통해 스타일을 적용할 수 있습니다. 두 가지 방법을 사용할 수 있는데, CSS를 직접 <style> 태그나 외부 CSS 파일에 적용하는 방법과 JavaScript를 통해 스타일을 적용하는 방법입니다.

1. CSS를 통해 스타일 변경하기

CSS를 통해 results div의 스타일을 미리 지정할 수 있습니다. 예를 들어, 검색 결과가 표시되는 부분의 배경색, 테두리, 글꼴 스타일 등을 지정할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>메뉴 검색</title>
    <style>
        #results {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            max-height: 200px;
            overflow-y: auto;
            font-family: Arial, sans-serif;
        }

        #results a {
            display: block;
            padding: 5px;
            text-decoration: none;
            color: #333;
        }

        #results a:hover {
            background-color: #e0e0e0;
            color: #000;
        }
    </style>
    <script>
        function searchMenu() {
            var searchQuery = document.getElementById("searchInput").value;
            if (searchQuery.length > 0) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "search.asp?query=" + encodeURIComponent(searchQuery), true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        document.getElementById("results").innerHTML = xhr.responseText;
                    }
                };
                xhr.send();
            } else {
                document.getElementById("results").innerHTML = "";
            }
        }
    </script>
</head>
<body>
    <h1>메뉴 검색</h1>
    <input type="text" id="searchInput" onkeyup="searchMenu()" placeholder="메뉴 검색...">
    <div id="results"></div>
</body>
</html>

2. JavaScript를 통해 스타일 변경하기

JavaScript로 동적으로 results의 스타일을 변경할 수 있습니다. 예를 들어, 검색 결과가 업데이트될 때마다 특정 스타일을 적용하려면 다음과 같이 할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>메뉴 검색</title>
    <style>
        /* 기본 스타일 */
        #results {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            max-height: 200px;
            overflow-y: auto;
        }
    </style>
    <script>
        function searchMenu() {
            var searchQuery = document.getElementById("searchInput").value;
            var resultsDiv = document.getElementById("results");

            if (searchQuery.length > 0) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "search.asp?query=" + encodeURIComponent(searchQuery), true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        resultsDiv.innerHTML = xhr.responseText;

                        // 결과가 있을 때 스타일을 변경
                        resultsDiv.style.backgroundColor = "#f9f9f9";
                        resultsDiv.style.border = "1px solid #ccc";
                        resultsDiv.style.padding = "10px";
                    }
                };
                xhr.send();
            } else {
                resultsDiv.innerHTML = "";
                // 검색어가 없을 때 스타일을 초기화
                resultsDiv.style.backgroundColor = "transparent";
                resultsDiv.style.border = "none";
                resultsDiv.style.padding = "0";
            }
        }
    </script>
</head>
<body>
    <h1>메뉴 검색</h1>
    <input type="text" id="searchInput" onkeyup="searchMenu()" placeholder="메뉴 검색...">
    <div id="results"></div>
</body>
</html>

3. JavaScript로 동적으로 생성된 요소 스타일링

검색 결과로 반환된 링크(<a> 태그)에 스타일을 추가하려면, 위의 CSS 예제에서와 같이 #results a와 같은 CSS 선택자를 사용하여 스타일을 정의할 수 있습니다. 만약 JavaScript로 직접 스타일을 적용하고 싶다면, getElementsByTagName이나 querySelectorAll을 사용하여 요소를 선택한 후 스타일을 적용할 수 있습니다.

document.querySelectorAll('#results a').forEach(function(link) {
    link.style.display = "block";
    link.style.padding = "5px";
    link.style.textDecoration = "none";
    link.style.color = "#333";
});

이 방법들 중 하나를 사용하면, 실시간 검색 결과의 스타일을 쉽게 관리할 수 있습니다. CSS로 스타일을 관리하는 것이 유지보수 측면에서 더 효율적이며 권장됩니다.

저작자표시 비영리 변경금지

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

[JavaScript] 전화번호 - 표시 하고, 저장은 숫자로만 (0)	2024.08.29
[ASP, MSSQL] dbconnection.asp 사용하기 (0)	2024.08.28
[도커] 시놀로지 SSH로 Docker 사용하는 명령어들 (0)	2024.08.21
[톰캣] tomcat에서 context 추가하는 방법 3가지 (0)	2024.08.21
[이클립스] 프로젝트 기본 Text file encoding을 UTF-8로 변경하기 (0)	2024.08.21

아래에 코딩ㆍ개발 정보/HTML 연습의 더 많은 정보에 링크를 걸어놨습니다.

[JavaScript] 전화번호 - 표시 하고, 저장은 숫자로만 바로가기 클릭![ASP, MSSQL] dbconnection.asp 사용하기 바로가기 클릭![도커] 시놀로지 SSH로 Docker 사용하는 명령어들 바로가기 클릭![톰캣] tomcat에서 context 추가하는 방법 3가지 바로가기 클릭!

코딩ㆍ개발 정보/HTML 연습