Whiteship's Note

스프링 JSON view와 jQuery 이용하여 자동완성 기능 만들기 4

모하니?/Coding : 2009.07.14 18:35


마무리로 태그 파일화 작업을 했습니다.

             <o:textwithac label="이름" id="name" size="20" maxlength="30"
                 url="/ajax/user/names.do" model="users" width="200" selectFirst="true" />

이런 태그와..

<script type="text/javascript">
function formatItem(row, i, total){
    return row[1] + " " + row[2];
}
function formatResult(row){
    return row[1];
}
function result(event, row, formatted){
    if (row){
        $("#namedetail").text(row[0] + " " + row[2]);
    }
}
</script>

자바스크립트 함수 세 개로 자동완성 기능을 사용할 수 있습니다.

속성 중에서

url="/ajax/user/names.do" model="users" width="200" selectFirst="true"

이 녀석들이 자동완성과 관련된 속성들이며..

formatItem은 자동완성 목록을 어떤 형태로 보여줄지 코드를 작성해주면 되는데, 이 때 row는 현재 데이터 row이고, i는 인덱스, total은 총 갯수 입니다.

formatResult는 자동완성 목록에서 선택했을 때 text input 박스에 최종적으로 입력할 값을 return하도록 합니다.

마지막으로 result는 자동완성 목록을 선택했을 때 후 처리 이벤트 같은 것으로, result 타입의 이벤트와, 선택한 데이터 row, 그리고 formatResult에서 input 필드에 입력되도록 포맷팅한 값입니다. 이 녀석들을 이용해서 적당하게 코딩해주면 되겠습니다. 예제에서는 namedetila이라는 엘리먼트에 부가정보를 기입해주었습니다.



top

Write a comment.




: 1 : ··· : 116 : 117 : 118 : 119 : 120 : 121 : 122 : 123 : 124 : ··· : 299 :