jQuery AutoComplete을 이용한 suggestion Box + themeleaf

FRONT-END 2017. 5. 25. 17:32

jQueryAutoComplete API Doc

suggestion (구글 검색창 처럼, 한 글자를 입력하면 자동으로 추천해주는 기능)

을 구현하기 위해서는 text box와 그 밑에 div를 이용해서 복잡하게 하는게 좋긴 한데

jQuery의 AutoComplete라는 기능을 이용해서 간단하게 할 수 있다. REF (value만 있는 autoComplete)

label, value가 있는 autocomplete 예제는 여기: REF - 별로 이쁘지 않고, 키로 값이 선택되지도 않음

약간 발전된 예제: REF -test중.

위 예제들에서 javascript 변수에 값 설정만 잘하면 된다.

추가로, 만약 Themeleaf를 사용하고 있다면..

<script th:inline="javascript">
    /*<![CDATA[*/
    var query = [[${query}]];
    console.log(message);
    /*]]>*/
</script>

방식으로 간단히 themeleaf변수를 javascript에 넣을 수 있다.

복잡한 변수의 경우 themeleaf파싱이 필요한데.. REF1

다음과 같이 themeleaf와 value, label을 조합해 사용할 수 있다.

<script type="text/javascript" th:inline="javascript">
  /*<![CDATA[*/
  $(function () {
    var suggestionData = [[${javaData}]];
    $('#users').autocomplete({
      source: suggestionData,
      select: function (event, ui) {
        //prevent .val(value) to input_text
        event.preventDefault();
        //.val(label) and store selected Value
        $('#users').val(ui.item.label);
        $('#userSelected').val(ui.item.value);
      },
      focus: function (event, ui) {
        //prevent .val(value) to input_text
        event.preventDefault();
      }
    });
  });
  /*]]>*/
</script>