Javascript Input 태그에 추천 입력값 보여주기

728x90

자바스크립트 Input 태그에 추천 입력값 보여주기

웹페이지에서 input 박스 태그에 정확한 입력값을 요구해야 할 경우가 있다. 정해진 입력값을 받아야 나중에 통계자료 등을 뽑아낼 때 편리하다. 보통 이런 경우에는 <select>~</select> tag를 이용하여 사용자로 하여금 선택하도록 한다.

그러나 select 태그를 사용하기에 곤란한 경우가 있을 수 있는데 이런 경우에는 form을 submit 할 때 해당 입력값을 db에서 찾아보고 있으면 true, 없으면 false로 리턴하게 하여 사용자 입력값을 정상적인 값으로 수정하게끔 유도할 수 있다.

그런데 이 form을 submit까지 진행하기 전에 입력하는 단계에서 입력값으로 적합한 value를 추천해 주도록 하면 더 좋지 않을까?

이번 글에서는 자바스크립트에서 input 태그 항목에 사용자가 어떤 값을 입력하고자 할 때 앞 한글자만 입력해도 그 글자로 시작하는 추천 단어를 보여주는 기능을 하는 코드를 알아보도록 하겠다.

728x90

먼저 아래 코드는 위 기능을 수행하는 전체 코드이니 참고하면 좋겠다.

Input 입력 추천값 예제 코드

<!DOCTYPE html>
<html>
<head>
    <title>Jisa Autocomplete</title>
    <script>
        var jisaList = "<%= strJisa %>".split(',');

        function suggest(input) {
            var suggestions = [];
            var inputVal = input.value.toLowerCase();
            
            if (inputVal.length > 0) {
                for (var i = 0; i < jisaList.length; i++) {
                    if (jisaList[i].toLowerCase().indexOf(inputVal) === 0) {
                        suggestions.push(jisaList[i]);
                    }
                }
            }

            displaySuggestions(suggestions);
        }

        function displaySuggestions(suggestions) {
            var suggestionsDiv = document.getElementById('suggestions');
            suggestionsDiv.innerHTML = "";

            for (var i = 0; i < suggestions.length; i++) {
                var div = document.createElement('div');
                div.innerHTML = suggestions[i];
                suggestionsDiv.appendChild(div);
            }
        }
    </script>
</head>
<body>
    <h1>Jisa Autocomplete</h1>
    <input type="text" onkeyup="suggest(this)" placeholder="Enter jisa">
    <div id="suggestions"></div>
</body>
</html>

코드 Review

변수 strJisa에는 각 지사명이 콤마로 구분하여 저장되어 있다.

예를들면 "서울지사, 광주지사, 인천지사, 경기지사"와 같은 형태로 저장된다.

input 태그에는 onkeyup 이벤트를 걸어서 사용자가 입력을 하면 suggest(this) 함수를 수행하도록 하였다.

input 태그 바로 밑에 있는 suggestions라는 id를 가진 div가 있는데 이것은 사용자가 input 태그에 값을 입력하게 되면 input 태그 바로 아래에 추천 단어를 보여주기 위한 용도이다.

suggest() 함수는 사용자가 입력한 단어로 시작하는 목록이 있으면 그 목록(지사명)을 suggestions라는 배열에 저장한다.

예를 들어 사용자가 '서'를 입력했다면 '서'로 시작하는 지사명을 모두 찾아서 suggestions 배열에 ('서수원지사', '서대구지사', '서부산지사')와 같은 형태로 저장을 한다.

끝으로 displaySuggestions 함수에서는 추천 단어가 저장되어 있는 suggestions 배열의 값을 suggestions div에 출력을 한다.

코드 실행 결과

코드를 적용하면 위와 같이 입력란에 '부'를 입려가면 '부'로 시작하는 추천 단어가 아래쪽에 표시된다. 사용자는 표시된 추천 단어 중 하나를 입력해 주면 된다.

728x90

'vita_Programing' 카테고리의 다른 글

javascript/jquery 다중 체크박스 값 가져오기 (0)	2024.05.27
HTML+CSS 드롭다운 메뉴 튜토리얼 (1)	2024.05.26
자바스크립트 배열 컨트롤 중급편 2/2 (0)	2024.05.20
자바스크립트 배열 컨트롤 중급편 1/2 (1)	2024.05.19
Javascript 배열 선언 예제 (0)	2024.05.18

LEMONVITA