[TIL] #DAY - 032 - 검색 기능_Search (내일배움캠프AI 3기)

---

---

프로젝트  중..

오늘은 검색 기능을 추가하여 해당 기능에대해서 골머리가 아팠지만

어찌저찌해서 해결한 내용을 적어보겠다.

프로젝트 중이라 힘이 빠지지만

항상 화이팅 해보자.

화.이.팅!

 

---

---

---

urls.py

from django.urls import path
from . import views

app_name='contents'
urlpatterns = [
    path('search/', views.search, name='search'), # 게시글 검색시 검색 결과창 링크 연결
]

 

views.py

def search(request):
    q = request.POST.get('q', "")  # I am assuming space separator in URL like "random stuff"
    search_menu = request.POST.get('search_menu', "") # 검색창 왼쪽에 드롭박스(제목, 내용, 태그 중에 1개를 골라서 검색)
    print(search_menu)
    if search_menu == '1': # 제목을 선택시 '1' 이 반환되어 1일 경우 아래 조건문 실행
        query = Q(title__icontains=q)
        searched = Feed.objects.filter(query)

    elif search_menu == '2': # 내용을 선택시 '2' 이 반환되어 2일 경우 아래 조건문 실행
        query = Q(content__icontains=q)
        searched = Feed.objects.filter(query)

    elif search_menu == '3': # 태그를 선택시 '3' 이 반환되어 3일 경우 아래 조건문 실행
        query = Q(tags__name__icontains=q)
        searched = Feed.objects.filter(query)


    return render(request, 'search.html',{'searched':searched, 'q': q })

 

search.html

    {% if searched %} # 만약, 검색창에 입력한 값이 있다면 이라는 의미입니다.
    <h1 style="display: flex; flex-direction: row; width: 60vw; height: 50px; margin: 20px auto 0 30vw; text-align: center;"> 검색하신 {{ q }} 정보입니다. </h1>

    <div style="display: flex; flex-direction: row; width: 60vw; height: 50px; background-color: #fafafa; margin: 20px auto 0 30vw; text-align: center; border-bottom: solid 1px #c8c4c4;">
        <div style="width: 5vw; min-width: 50px; margin: auto;"><b>글번호</b></div>
        <div style="width: 5vw; min-width: 50px; margin: auto;"><b>카테고리</b></div>
        <div style="width: 25vw; min-width: 250px; margin: auto;"><b>제목</b></div>
        <div style="width: 10vw; min-width: 100px; margin: auto;"><b>닉네임</b></div>
        <div style="width: 15vw; min-width: 150px; margin: auto;"><b>작성시간</b></div>
    </div>
    {% for search in searched %} # searched에 담겨져있는 내용을 search에 하나씩 담아서 반복 실행
    <div style="display: flex; flex-direction: row; width: 60vw; height: 50px; background-color: white; margin: 0 auto 0 30vw; text-align: center; border-bottom: solid 1px #c8c4c4;">
        <div style="width: 5vw; min-width: 50px; margin: auto;">{{ search.id }}</div>
        <div style="width: 5vw; min-width: 50px; margin: auto;">{{ search.category }}</div>
        <div style="width: 25vw; min-width: 250px; margin: auto auto auto auto; padding-left: 30px; text-align: left;"><a href="/contents/detail/{{ search.id }}" style="color: black; text-decoration: none;"><b>{{ search.title }}</b></a></div>
        <div style="width: 10vw; min-width: 100px; margin: auto;">{{ search.user.nickname }}</div>
        <div style="width: 15vw; min-width: 150px; margin: auto;">{{ search.created_at }}</div>
    </div>

    {% endfor %}
    {% else %} # 검색창에 아무것도 입력하지 않았을 경우 뜨는 메시지입니다.
    <h1> 찾고 있는 이름을 검색창에 입력해주세요. </h1>
    {% endif %}

---

 

검색창

 

 

검색 결과 창