jquery autocomplete(자동완성) 바로 띄우기

Sunset·2022년 7월 5일
0

Javascript/Jquery

목록 보기
4/7

jquery에 autocomplete 자동완성 기능이 있는걸 알게 되었다.
일단 구현해 보자.

<!DOCTYPE html>
<head>
    <title>Document</title>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- jquery-ui -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- jquery-ui css -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
</head>
<body>
    <input type="text" id="inputBox">
</body>
</html>
<script>
    $(document).ready(function() {
        var inputSource = ['서울', '대전', '대구', '부산', '제주', '강릉',
                           '원주', '인천', '광주', '울산', '평창', '천안'];

        $('#inputBox').autocomplete({
            source : inputSource,
            minLength : 1
        });
        
    });
</script>

minLength : 1 설정으로 한글자 입력시 자동완성이 된다.

이제 내가 할려는건 input창 포커스 이벤트시 바로 자동완성이 나오는것이다.
minLength의 값을 0으로 주면 당연히 될듯 싶어지만 되지 않는다..
stackoverflow에 보면 아래 처럼 코드를 추가해 주면 된다고 한다.

$('#inputBox').autocomplete({
            source : inputSource,
            minLength : 0
        }).focus(function() {
            $(this).autocomplete("search", $(this).val());
        });

이렇게해서 실행을 해보면..
잉? 된다..다른곳에서 할때는 안되서 끄적이는 건데 ㅎ

이게 원래 안되는건 줄 알았는데 환경에 따라 다른가..
아무튼 이제부터는 안되서 찾은 내용들이다.

minLength : 0 일 경우, input 클릭 포커스 상태에서 화살표 아래나 위쪽 키를 누르면 위 그림처럼 모든데이터의 자동완성이 뜨게 된다.

그래서 아래화살표↓를 입력하는 이벤트를 주었다.

Jquery

$('#inputBox').focus(function() {
   					       //아래쪽화살표 keyCode : 44
	var e = $.Event("keydown", { keyCode: 40 });
	$(this).trigger(e);
});

위에는 jquery trigger로 focus가 될때 아래화살표를 입력해주는 이벤트를 실행한다.
근데 집에서하면 잘되네ㅎ 이것도 처음 한번만 실행되고 두번째부터는 안되서 아래는 자바스크립트로 구현한 것이다.

Javascript

<script>
    $(document).ready(function() {
        var inputSource = ['서울', '대전', '대구', '부산', '제주', '강릉',
                           '원주', '인천', '광주', '울산', '평창', '천안'];

        $('#inputBox').autocomplete({
            source : inputSource,
            minLength : 0
        });
        
        var inputBox = document.querySelector('#inputBox');
        inputBox.addEventListener("focus", downArrow);

    });

    function downArrow() {
        var event = document.createEvent("Event");
        event.initEvent("keydown", true, true);
        event.keyCode = 40
        document.getElementById("inputBox").dispatchEvent(event);
    };
</script>

상황에 맞게 되는걸 쓰자~

0개의 댓글