White Life Story

소개

인터넷 검색을 하면서 무심결에 사용하고 있는 기능이 있다. 바로 자동완성 기능이다. 검색어를 만드는 중 미리 연관 검색어를 가져와서 완성을 돕는다. 개발 단계에서 단골손님으로 등장하는 요구 사항이다.

해당 기능을 위한 라이브러리를 공유 한다.

위 그림은 유사한 라이브러리인 jQuery autocomplete 와 typeahead 의 관심도 통계 이다. 구글 트랜드를 사용하였다. 사용량은 증가하는 추세 이다.

2가지의 라이브러리로 구성 되어 있다.

• bloodhound.js (standalone suggestion engine)
• typeahead.jquery.js (standalone UI view)

검색을 담당하는 bloodhound.js 와, 이벤트 처리를 담당하는 typeahead.jquery.js 로 구성 되어 있다. 실제 라이브러리를 사용할 때에는 bundle 버전을 사용 한다. 두 가지 기능을 포함하고 있다.

브라우저 지원 여부

라이브러리 사용에 앞서 지원 브라우저 확인은 필요 하다. 프로젝트 정책에 맞지 않는 브라우저가 있는 경우, 울며 겨자먹기로 개발하는 경우가 생길 수 있기 때문 이다.

특징

자동완성 시 시점마다 이벤트가 구현되어 있어, 개발이 편리 하다.

• typeahead:open ( 검색 창 열림 )
• typeahead:rendered ( 검색 결과 생성 )
• typeahead:cursorchanged ( 위 아래 커서 이동 )
• typeahead:selected ( 선택 )
• typeahead:autocompleted ( 검색어 자동완성 Tab 키 )

사용 예제

See the Pen typeahead sample by min chul park (@whitelife) on CodePen.

참고 사이트

• https://www.google.com/trends/explore#q=jquery%20autocomplete%2Ctypeahead
• https://github.com/twitter/typeahead.js
• http://twitter.github.io/typeahead.js/examples/

개발을 하다보면 빼 놓을 수 없는 것이 한가지 있다. 바로 달력 이다. 개발자를 귀찮게 하는 요소 중 한 가지 인데, 제일 큰 이유는 아래와 같다.

대표적인 라이브러리는 jQuery Datepicker 이다. 하지만 UI 는 그대로 사용 할 수 없다.

제공 되는 서비스에 따라 달력은 여러가지 형태로 제공 되게 된다. 요구 조건에 맞게 변경 하는 방법을 알아 보자.

jquery, jquery ui 라이브러리를 다운로드 한다.

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

Html 을 작성 한다.

<div id="datepicker"></div>

Datepicker Element 를 생성 한다.

$('#datepicker').datepicker({
    inline: true,
    showOtherMonths: true,
    showMonthAfterYear: true,
    monthNames: [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' ],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토']
});

기본적인 준비는 완료 되었다. 이제 CSS 를 적용 해보자. 간단하게 정리를 해보았다.

• ui-datepicker: 배경 표시
• ui-datepicker-title: 년, 월 표시
• ui-datepicker-header: 요일 표시
• ui-datepicker-prev: 이전 달 버튼
• ui-datepicker-next: 이후 달 버튼
• ui-datepicket table: 일 표시

추가적인 내용은 동적으로 생성 되는 HTML 을 참고 하도록 하자.

샘플 URL: http://jsfiddle.net/whitelife/6mxx8rex/

위 방법을 이용해서 CSS 작업을 한다면, 의도하는 달력을 제작 할 수 있을 것이다.

참고 사이트

• http://www.hongkiat.com/blog/jquery-ui-datepicker/

javascript 기반으로 개발 할 때 시간을 많이 단축 시켜 주는 유용한 라이브러리 이다. 전역 변수로 같은 $ 를 사용하고 있기 때문에 곂쳐지게 되어 사용이 불가하게 된다.

해결 방법으로는 jQuery 를 먼저 선언 하고 전역 변수명을 바꾸어 주고, prototype 를 선언 한다. 아래 코드를 참고 하자.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
<script type="text/javascript">
jQuery.noConflict();
var w$ = jQuery;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js" type="text/javascript"></script>

위와 같이 변경 하게 되면 라이브러리 선언에 대한 순서에 신경을 써야 한다. jQuery 기반의 라이브러리는 상단에 우선 시 하여 선언 한 후 제일 마지막에 전역 변수명을 변경 하도록 하자.

Web Application View 는 보통 Html 을 사용한다. Dom 객체를 필요에 따라 생성 할때 유용한 라이브러리를 소개 한다.

• Github: https://github.com/BorisMoore/jquery-tmpl

사용을 위해서 jquery.tmpl.js, jquery.tmplPlus.js 파일을 /js 폴더에 추가 하자.

<script id="sampleData" type="text/x-jQuery-tmpl">
    <tr>
        <td>{{= sample1}}</td>
        <td>{{= sample2}}</td>
    </tr>
</script>

실제 동적으로 추가할 Template을 작성 한다. 위 내용을 참고 한다.

Template 작성이 완료 되었다면, 실제 코드를 작성 하자.

$('#sampleData').tmpl([{ sample1: 1, sample2: 2 }]).appendTo('body');

Template 객체를 불러 온 후 tmpl(data) 함수를 사용하여 값을 바인딩 한다. 그 후 원하는 부분에 appendTo(target) 하여 적용 하면 된다.

직접 문자열로 생성하여 개발 하거나 객체화하여 추가 할 수 있지만, Template 를 사용하면 개발이 유연해지는 모습을 볼 수 있기 때문에, 시간도 단축 된다. 라이브러리 사용이 가능한 환경이라면 적용 해 보자.

Sample

$.param 을 사용하면 tests=1&test=2&test=3 형태로 변경 해준다.

var tests = [1, 2, 3, 4, 5];

$.ajax({
    type: 'post',
    url: '/test',
    data: {
        tests: $.param({ tests: tests }, true)
    },
    dataType: 'json'
}).done(function(result) {
    // success
}).fail(function(result) {
    // fail
});

참고 사이트

• http://api.jquery.com/jquery.param/

Sample

$(element).attr() 사용 시 안되는 경우가 있어 prop 로 변경 하니 동작 하였다.

$('#allDeleteCheck').on('click', function() {
    var chk = $(this).is(':checked');

    if (chk) {
        $(".deleteCheck").prop('checked', true);
    } else {
        $(".deleteCheck").prop('checked', false);
    }
});