MongoDB - Query String 으로 검색기능 구현

1. query string 으로 url에 입력된 값을 서버로 전달하기

검색어를 입력하고 제출을 하게 되면

url 을 /list?아무변수이름=검색어 형태로 redirection 하면 된다.

 

 

 

2. 검색창을 만들어줍니다.

    <div>
      <input id="search-input">
      <button id="search">검색</button>
    </div>

 

 

 

3. 유저가 검색 input에 입력한 값을 query 문으로 전달합니다.

    <script>

      $('#search').click(()=> {

        const searchInput = $('#search-input').val()

        window.location.replace("/search?value=" + searchInput)

        => 이렇게 작성하여 GET요청과 동일하게 동작하여 URL을 바꿀 수 있다.

      })

    </script>

 

 

value는 정해진 값이 아니라 아무렇게나 작성하면 되는 변수명이고,

밥먹기는 검색창에 입력한 값.

 

 

 

+++

쿼리 형태를 직접 입력하지 않고, Object 타입의 자료를 Query String 형태로 변환하려면
$.param(자료) // {name:"value", name2:"value2"}
폼 태그로 전송한 데이터 전부를 Query String 형태로 만들려면
$(폼태그).serialize()

+++

 

 

 

4. Query String으로 전달한 데이터 서버에서 출력해보면

app.get("/search", (요청, 응답) => {

  console.log(요청.query);

});

=> { value: '밥먹기' }

이렇게 Object 자료형으로 변환되어 출력됩니다.

 

 

 

 

5. 검색이 된 결과 페이지를 만들어 줍니다.

app.get("/search", (요청, 응답) => {
  const 검색어 = 요청.query.value;
  db.collection("post").find({ 제목: 검색어 }).toArray((에러, 결과) => {
      응답.render("searchList.ejs", { searchResult: 결과 });
    });
});

searchList.ejs 라는 이름의 파일을 만들어주었습니다. 

내용물은 list.ejs 파일과 동일한데, 렌더링할 변수만 다릅니다.

      <% for (var i = 0; i < searchResult.length; i++){ %>
      <li class="list-group-item">
        <p href="<%= `detail/${searchResult[i]._id}` %>">글번호 : <%= searchResult[i]._id %></p>
        <h4><a href=<%= `detail/${searchResult[i]._id}` %>>할일 제목 : <%= searchResult[i].제목 %></a></h4>
        <p>할일 마감날짜 : <%= searchResult[i].날짜 %></p>
        <button class="btn btn-danger delete" data-id="<%= searchResult[i]._id %>">삭제</button>
      </li>
      <% } %>

 

 

 

6. 검색해봅시다.

Query 주소로 이동도 잘 되고(window.location.replace("/search?value=" + searchInput)) <<< 얘 덕분

검색 결과만 출력이 잘 됩니다.

 

하지만 정확히 검색어가 일치하는 게시물만 나타납니다.