Whiteship's Note


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

모하니?/Coding : 2009.07.14 15:32


jQuery 플러그인 중에 autocomplete가 있는데, 이 녀석은 배열을 사용하기 때문에 URL에서 넘어온 JSON 데이터를 제대로 인식하지 못할 뿐더러, JSON을 인식한다쳐도 스프링 JSONView가 만들어주는 JSON에서 모델이름으로 값을 꺼내와야 하는데, 그런 장치가 전혀 없기 때문에... 뜯어 고쳤습니다.

새로운 option을 추가하고, Ajax 요청을 보내는 부분을 고치고, Ajax로 받아온 데이터를 파싱하는 부분을 수정했더니 잘 동작했습니다. 스프링 JsonView에 특화된 jQuery 자동완성 플러긴으로 보면 되겠군요.


목록에 보여줄 형태를 옵션으로 지정해 줄 수 있어서 이름 + " " + 이메일 형태를 보여주도록 설정했습니다. 넓이도 조정할 수 있으니.. 글자가 잘리지 않게 너비를 조정할 수도 있겠네요.

자세한 옵션은 http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

여러가지 사용 예제는 http://jquery.bassistance.de/autocomplete/demo/

모든 옵션을 확인하진 않았지만, 대부분의 옵션(목록 갯수 설정, 검색할 때 필요한 최소 글자 수, 등등등)이 제대로 동작했습니다.

기본으로 화살표 이동도 되고, 캐싱도 지원해주니.. 이 정도면 썩 괜찮으 듯 합니다. 선택이 했을 때는 선택한 데이터 row를 가지고 function을 실행할 수 있게 해주는데, 그걸 이용해서 입력한 값 주변에 기타 정보를 출력하도록 만들 수 있었습니다.

그러나 한글값을 넘겨봤더니 깨지더군요. 그래서 encodeURIComponent()로 값을 감싸서 UTF-8로 보냈습니다. 그런 다음 컨트롤러에서 받아서 디코딩을 했죠.

keyword = URLDecoder.decode(keyword,"UTF-8");

디코딩 하는 방법은 성윤이가 도와줬습니다. 흠.. 사부님 말씀으로는 이렇게 UTF-8로 인코딩/디코딩 하지 않고도 처리할 수 있는 방법이 있는 것 같은데.. 일단 거기까진 신경쓰지 않기로 했습니다. 지금도 충분히 어지러우니까요. @_@

라이선스가 GPL하고 mit 라이선스던데 소스를 공개해야 라이선스를 위반하지 않는거 아닌지 모르겠네요. 대충 고친건데.. 흠..

이젠 테스트 데이터를 왕창 넣고 확인해 봐야겠습니다.
top


[jQuery] 날짜 선택하기

View/JavaScript : 2009.07.08 20:33


jQuery UI 위젯이 제공하는 기본 달력은 다음과 같습니다.


흠.. 이것까진 간단했습니다. 이 것을 이용한 태그 파일 두개를 만들었습니다. 하나는 검색 필드용 하나는 폼 필드용. 검색 필드는 get 방식으로 url뒤에 줄줄이 붙여서 가져올 것이고 폼 필드는 post 방식에서 사용하여 model의 특정 속성에 바로 바인딩 할 겁니다. 둘 다.. 자바스크립트 코드 부분은 다음과 같습니다.

    $(function() {
        $("#${id}").datepicker({
            dateFormat: 'yy/mm/dd',
            changeMonth: true,
            changeYear: true,
            yearRange: '${fromNS}:${toNS}'
         });
    });

적당한 포맷을 설정하고, 연도와 달을 좀 더 변경하기 쉽게 드랍다운으로 설정했고, 연도 범위를 설정했는데, 이 값은 태그에 전달해준 값을 쓰기로 했습니다. 값을 전달해 주지 않으면 기본값을 쓰도록 했지요.

복잡한건, 날짜 범위를 선택하는 것인데, 이건 Ajaxian에서 10가지 date picker중 하나로 선정된 filament group의 daterangepricker를 이용했습니다.


    $(function() {
        $("#${id}").daterangepicker({
            dateFormat: 'yy/mm/dd',
            datepickerOptions: {
                changeMonth: true,
                changeYear: true,
                yearRange: '${fromNS}:${toNS}'
            }
        });
    });

대충 이렇게 보여집니다. 옵션이 다양해서 이 녀석을 써봤습니다. 문제는 하나의 필드에 두 개 날짜 값을 넣어주고 있어서 DateRange라는 클래스를 만들고, DateRangePropertyEditor도 만들어줬습니다. DateRange 클래스는 테스트를 통해서 문자열 값을 생성자에 넣어줬을 때 제대로 동작하는지 확인을 해보았고, DRPE를 등록해서 돌아가는지 웹에서 확인도 해봤습니다.

이 녀석은 검색용 태그파일만 만들었는데.. 만들고 보니 날짜를 한 개만 받는 녀석이랑 용도가 겹치더군요. Today랑 Specific Date는 메뉴에서 빼고 싶어서 옵션들을 살펴봤는데 영~~ 시원찮네요. 흠.. 뺄 수 있을텐데 말이죠.


top


[JQuery] J쿼리 이용해서 속성 값 변경하기, 엘리먼트 셀렉션, 이벤트 추가하기

View/JavaScript : 2009.05.27 16:13


attr을 사용하면 됩니다. 이전에 작성한 탭 만들기 글에서 a 엘리먼트의 onclick 속성을 사용하여, 자바스크립트 함수를 호출했었는데, J쿼리를 이용해서 그런 부분을 완전히 자바스크립트 쪽으로 떼어 낼 수 있게 되었습니다.

            $(document).ready(function() {
                $("#topnav a").bind("click", function () {
                    var id = $(this).parents("li").attr("id");
                    $("body").attr("class", id);
                });
            });

이 간단한 코드에 위 제목에서 언급한 모든 것들이 들어있습니다. 먼저, 이벤트 등록을 html에서 완전히 분리할 수 있게 도와주는 코드는 바로..

$(document).ready(function() {

});

이 녀석입니다. 이 안에서 이벤트 등록 작업을 해주면,

<a href="#" onclick="changeMenu('report');">

HTML에서 이런 코드를 작성하지 않아도 됩니다.

다음은 이벤트를 등록하는 코드입니다.

$("#topnav a").bind("click", function () {

});

그 전에 셀렉션을 보겠는데, #topnav a 이 부분은 topnav id를 가진 엘리먼트 하위의 a 엘리먼트를 모두 선택하라는 것입니다. API를 보면 더 다양한 방법들이 예제와 함께 잘 나와있습니다.

다시 이벤트 코드로 돌아가서 bind는 특정 이벤트에 어떠한 함수를 호출하도록 등록하는 함수인데, 이것을 특정 이벤트에 맞게 줄여서 다음과 같이 쓸 수도 있습니다.

$("#topnav a").click(function () {

});

간단하죠. click은 클릭하라는게 아니라 click 이벤트 핸들러를 등록하는 겁니다.

var id = $(this).parents("li").attr("id");

이 코드에서는 parents를 사용해서 자신을 감싸고 있는(여기서 자신은 사용자가 클릭한 a 엘리먼트겠죠.) 엘리머먼트 중에 li를 선택하고, 그 엘리먼트의 id 속성 값을 가져옵니다.

attr(속성이름)은 보시다시피 속성의 값을 가져오는 게터와 비슷합니다.

이와 반대로 세터 역할을 하는 함수도 역시 attr인데 사용법이 조금 다릅니다. 이번에는 인자를 하나 더 줍니다.

$("body").attr("class", id);

이렇게, attr(속성이름, 값) 형태로 사용하면 세터같이 동작합니다. 참~~ 편리하군요.


ps: 원래는 body의 class가 아니라 id를 변경하도록 코드를 작성했었는데, 잘 되지 않아서 class를 이용해봤는데 잘 동작하네요. 왜 그런지는 모르겠습니다. $(document).ready(function(){}); 이 것을 사용하지 않으면 id 변경도 잘 되는데 말이죠.. 저것과 관련이 있어 보입니다.
top