JQuery Autocomplete 구현!

저번 조건대로 스팀 데이터를 필터링했더니 8만개에서 3만 6천개 정도로

반 이상이 줄었다!

그래서 앱 ID, 이름, 개발사, 배급사, 지원 언어, 가격 등이 들어가도록

크롤링을 시작해서 데이터베이스에 넣었다.

그리고 JQuery Autocomplete를 검색하고 적용하고 고치면서 구현에 성공했다!

<script type="text/javascript">
$(function(){
    // 선택된 게임 삭제
    $('.app_delete').click(function(e){
        e.preventDefault();
        $('.select_app_text').empty();
        $('.data_area').empty();
        $('input#id_app_name').val("");
        $('input#id_app_image').val("");
        $('input#id_app_price').val("");
        $('input#id_app_link').val("");
        $('input#id_app_release_date').val("");
    });

    $("#app_searchbox").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '/board/ajax/get_steam_app/',
                type: "GET",
                dataType: 'json',
                data: { term: request.term},
                success: function(data){
                    response(
                        $.map(data, function(item) {
                            return {
                                name: item.name,
                                image: item.image,
                                price: item.price,
                                link: item.link,
                                release_date: item.release_date

                            }
                        })
                    );
                }
            });
        },
        select: function(event, ui) {
            //console.log(ui.item);
            $('input#id_app_name').val(ui.item.name);
            $('input#id_app_image').val(ui.item.image);
            $('input#id_app_price').val(ui.item.price);
            $('input#id_app_link').val(ui.item.link);
            $('input#id_app_release_date').val(ui.item.release_date);

            $('.data_area').empty();
            $('.select_app_text').html('선택된 게임');
            $('.data_area').append($('<span/>').attr('class', 'app_image'));
            $('.app_image').append($('<img/>').attr('class', 'header_image'));
            $('.header_image').attr('width', '124px');
            $('.header_image').attr('height', '49px');
            $('.header_image').attr('src', ui.item.image);

            $('.data_area').append($('<span/>').attr('class', 'app_content'));
            $('.app_content').append($('<span/>').attr('class', 'app_name'));
            $('.app_name').html(ui.item.name);

            $('.app_content').append($('<span/>').attr('class', 'app_store_link'));
            $('.app_store_link').append($('<a/>').attr('class', 'app_link'));
            $('.app_link').attr('href', ui.item.link);
            $('.app_link').html(ui.item.link);

            $('.app_content').append($('<span/>').attr('class', 'select_delete'));
            $('.select_delete').append($('<a/>').attr('class', 'app_delete'));
            $('.app_delete').attr('href', '');
            $('.app_delete').html('삭제');
            //alert(image);
            //console.log(data);

            $(this).autocomplete( "close" );

        },
        focus: function(event, ui) {
            return false;
            event.preventDefault();
        },
        close : function (event, ui) {
            //alert("닫힌다!");
            return false;
        }
    }).data("ui-autocomplete")._renderItem = function(ul, item){
        return $( "<li></li>" )
                    .data( "ui-autocomplete-item", item )
                    .append( '<a><span class="item_image"><img width="120px" height="45px" src=' + item.image + '></span>' +
                                '<span class="item_content">' +
                                '<span class="name">' + item.name + '</span>' +
                                '<span class="price">' + item.price + '</span>' +
                                '<span class="store_link">' + item.link + '</span>' +
                                 '</span></a>' )
                    .appendTo( ul );
    };
});
</script>

선택했던 게임을 다시 삭제할 수 있도록 클릭 이벤트도 걸었다.

그리고 view에서는 검색 글자에 대한 Query를 랜덤으로 10개를 보여주도록 했다.

def steam_app(request):
    if request.is_ajax():
        q = request.GET.get('term', '')
        search_qs = SteamApp.objects.filter(Q(name__icontains=q) | Q(appid__icontains=q)).order_by('?')
        results = []
        for qs in search_qs[:10]:
            app_json = {}
            app_json['name'] = qs.name
            app_json['image'] = qs.image
            app_json['price'] = qs.final_price
            app_json['link'] = "https://store.steampowered.com/app/"+str(qs.appid)
            app_json['release_date'] = qs.release_date
            results.append(app_json)
        app_data = json.dumps(results)

    else:
        app_data = "fail"

    mimetype = 'application/json'
    return HttpResponse(app_data, mimetype)

검색한 결과는 10개를 보여주지만 style을 적용하여 5개만 보여주고 스크롤이 나오도록 했다.

.ui-autocomplete{
    max-width: 737px;
    max-height: 270px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

아 드디어 조금이라도 뭔가 한 것 같다!