django 추가기능 구현- 다양한방법으로 검색,정렬하기

base구성 - 아래 사이트를 바탕으로 구성된 

https://wikidocs.net/book/4223

점프 투 장고

 

 

게시글이 많아질수록 필요한 기능이기에 미리 구현해 놓는게 좋을 수 있다.

 

 

순서

html 수정 -> script 추가 -> views.py 수정 -> html수정 -> 편의성기능추가

 

 

html수정

먼저 옵션을 선택할 수 있는 select 박스를 만들어보자

<div class="col-1">
            <select class="selectpicker" name="sort_kinds" id="sort_kind">
                <option value="최신순" selected="selected">최신순</option>
                <option value="추천순">추천순</option>
                <option value="조회순">조회순</option>
            </select>
        </div>
        <div class="col-1">
            <select class="selectpicker" name="search_kinds" id="search_kind">
                <option value="전체" selected="selected">전체</option>
                <option value="제목">제목</option>
                <option value="내용">내용</option>
                <option value="글쓴이">글쓴이</option>
            </select>
        </div>

 

 

 

 

script 추가

get방식으로 검색,정렬옵션도 함께 넘겨주자.

script를 통해 값을 선택박스에 있는 값을 받아와서 저장시켜주고

const btn_search = document.getElementById("btn_search");
btn_search.addEventListener('click', function() {
	...
    var so = document.getElementById('sort_kind')
    document. getElementById('sortKind').value=so.options[so.selectedIndex].value;
    var ser = document.getElementById('search_kind')
    document.getElementById('searchKind').value=ser.options[ser.selectedIndex].value;
    ...
    document.getElementById('searchForm').submit();
});

hidden type을 통해 url에 시켜주었다.

<form id="searchForm" method="get" action="{% url 'index' %}">
        <input type="hidden" id="sortKind" name="sortKind" value="{{ sortKind }}">
        <input type="hidden" id="searchKind" name="searchKind" value="{{ searchKind }}">
</form>

 

views.py 수정

이제 get으로 넘겨받은 값들을 활용하여 각 조건에 맞는 데이터들로 데이터를 만들수 있도록 해주자.

...
from django.db.models import Q
from django.db.models import Count


def index(request):
    ...
    search_kind=request.GET.get('searchKind','전체')
    so=request.GET.get('sortKind','최신순')

   
    if so == '최신순':
        question_list = Question.objects.order_by('-create_date')
    elif so == '추천순':
        question_list=Question.objects.annotate(num_votes=Count('voter')).order_by('-num_votes')
    elif so == '조회순' :#추후 구현
        question_list = Question.objects.order_by('-create_date')
    if kw:
        if search_kind == '전체':
            question_list = question_list.filter(
                Q(subject__icontains=kw) |  # 제목 검색
                Q(content__icontains=kw) |  # 내용 검색
                Q(answer__content__icontains=kw) |  # 답변 내용 검색
                Q(author__username__icontains=kw) |  # 질문 글쓴이 검색
                Q(answer__author__username__icontains=kw)  # 답변 글쓴이 검색
            ).distinct()
        elif search_kind == '제목':
            question_list = question_list.filter(
                Q(subject__icontains=kw) # 제목 검색
            ).distinct()
        elif search_kind == '내용':
             question_list = question_list.filter(
                Q(content__icontains=kw)  # 내용 검색
            ).distinct()
        elif search_kind == '글쓴이':
             question_list = question_list.filter(
                Q(author__username__icontains=kw)   # 질문 글쓴이 검색
            ).distinct()
    ...

get으로 받아온 값들을 통해서 위와같이 조건에 맞춰서 Q모듈을 사용해 검색하고 정렬방식을 각 값에 맞춰서 바꾸어주면 된다.

 

html수정

이렇게 하면 기능에는 문제가 없지만 검색한후 다시 검색할때 문제가 된다. 마지막으로 선택한 검색방식과 정렬방식 검색어가 표시 될수 있도록 수정하자.

 

<script type='text/javascript'>
						...
//로드될때 실행
window.onload = function() {
    const searchParams=new URLSearchParams(location.search)

    const sort_kind = document.getElementById('sort_kind')
    for (i = 0 ; i<sort_kind.options.length ; i++){
        if (searchParams.get('sortKind') == sort_kind.options[i].value){
            sort_kind.value=sort_kind.options[i].value
        }
    }
    const search_kind = document.getElementById('search_kind')
    for (i = 0 ; i<search_kind.options.length ; i++){
        if (searchParams.get('searchKind') == search_kind.options[i].value){
            search_kind.value=search_kind.options[i].value
        }
    }
    const search_keyword=document.getElementById('search_kw')
    search_keyword.value=searchParams.get('kw')
}
						...
</script>

window.load를 통해 바로 실행될 수 있도록 만들었다.

const searchParams=new URLSearchParams(location.search)를 통해 url을 불러오고

get파라미터 값과 같은 선택메뉴를 바꿔 찾아주도록 하였다.

검색어 또한 유지될수 있도록 하였다.

 

 

편의성기능추가

search창에 입력후 enter를 눌렀을때 검색될수 있도록하고

정렬방식을 바꿨을때 바로 변경될수 있도록 변경해보았다. 

//서치폼에서 엔터눌렀을때
document.getElementById('search_kw').addEventListener('keydown',function(event){
    if(event.keyCode==13){
        search_fun();
    }
});
//선택박스 바꿧을때
document.getElementById('sort_kind').addEventListener('change',function(){
    search_fun();
});

추후 공지사항과 추천순에 따라 hot게시물을 구현해보자.