JQuery를 이용한 검색어 자동완성기능(jsp)

업무팀에서 요청하고, 또 내가 흥미로울 것 같아서 한번 만들어보았다.

물론 시간이 좀 걸렷다.. 지금 보면 정말 간단한건데..;;

 

< xxx.jsp >

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

 

상위에는 3가지 태그만 선언해주면 된다.

나의 경우에는 배열에 들어갈 데이터를 jsp자체에서 하드코딩하여 가져온게 있어서 그걸 활용하였다.

 

<script>

  $(function() {

    var availableTags = new Array();
   
    <%for(int i=0;i<groupNm.size();i++) {%>
     availableTags.push('<%=groupNm.get(i)%>');
    <%}%>
   
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

  </script>

 

저말은 즉슨

우선 availableTags 배열을 선언해준 뒤, 아까 말한 데이터 groupNm(List형태로 되어있다.)를 스크립트 매소드를 활용하여 하나씩 집어넣어준다. tags라는 아이디값을 가진 input tag에 값을 입력시 배열에 넣어준 값 중 찾아서 해당 리스트들만 뿌려준다.

 

그리고 html 쪽에 <input type="text" id="tags" name="group_name" /> 을 선언하여 데이터를 입력시 관련 데이터만 출력한다.

 

jquery 자체에서 제공하는 기능이기때문에 내가 그닥 해준건 없다.

정말 간단하지만, php나 워낙 사람손이 많이 들어간 소스들도 많아서 이것도 겨우 찾앗다.

 

참고한 사이트

 http://jqueryui.com/autocomplete/