Bootstrap modal 위에서 jQuery UI autocomplete 사용

jQuery UI의 자동 완성 (autocomplete)

jQuery UI 자동 완성 기능은 이렇게 쓴다.

<input id="inputAutocomplete"/>

$("#inputAutocomplete").autocomplete({
  source: "/YOUR/SEARCH/URL",
  minLength: 2,
});

구체적인 사용법은 공식 문서를 참조하자.

source에는 직접 배열 자료를 넣어줄 수도 있고, 위 예제처럼 input 값을 받는 요청(request) 주소를 줄 수도 있다. source가 주소일 경우, jQuery UI는 자동으로 GET 요청을 term 매개변수로 값을 실어 보낸다. DB에서 직접 찾거나, Elasticsearch 같은 검색 엔진을 사용해서 서버에서 처리해서 보내주게 하겠지?

그리고 minLength가 2이므로 최소 2 글자를 입력해야 자동 완성이 실행된다.

Bootstrap modal에서 사용법

bootstrap modal, 일명 레이어 팝업 위에 검색창을 띄우고 싶은데 위 코드대로 적용시켜보면 자동 완성 부분이 이상한 곳에 붙어있다.

위 JSFiddle에 아무 알파벳 하나만 쳐보면 자동 완성이 modal의 뒤쪽에서 나오고 있음을 알 수 있다. 이를 해결하기 위해서는 modal이 열릴 때, 자동 완성 옵션을 통해 modal DOM 영역으로 자동 완성이 이루어지는 영역을 한정시켜야 한다. 설명보다는 아래 코드를 참조하는 것이 더 좋을 것 같다.

// 자동 완성 ON (위 코드 그대로)
$("#inputAutocomplete").autocomplete({
  source: "/YOUR/SEARCH/URL",
  minLength: 2,
});

// modal이 열릴 때 다시 영역 한정 (appendTo 옵션)
$("#myModal").on("shown.bs.modal", function() {
  $("#inputAutocomplete").autocomplete("option", "appendTo", "#myModal")
})

shown.bs.modal 이벤트 발생 시 appendTo 옵션을 modal 영역으로 할당하는 것임을 알 수 있다.

결과는 직접 확인해보시길 ;]

오늘도 부실한 블로그질

---

참조 링크

jQuery UI autocomplete tutorial

jQuery UI autocomplete appendTo option

Bootstrap modal events

Stackoverflow post