• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Node.js, Express 게시판 검색 기능 3번째꺼

검색 기능 3번째꺼

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 글쓴이
  • #34446

    서영석
    참가자

    server.js 코드입니다

     

    app.get('/search', (req, res)=>{
        var 검색조건 = [
          {
            $search: {
              index: 'GoodSearch',
              text: {
                query: req.query.value,
                path: ['카테고리분류','상품명']  // 제목날짜 둘다 찾고 싶으면 ['제목', '날짜']
              }
            }
          },
          {$sort :  {_id : 1}}
      ]
        db.collection('good').aggregate(검색조건).toArray((error, result)=>{
          console.log(result)
          res.render("search.ejs",{ notes : result})
        });
      });

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>상품목록</title>
        <link  rel="stylesheet" type="text/css" href="css/brand.css">

        <style>
        h3 {
          text-align: center;
        }
        h1 {
          text-align: center;
        }
    div.minimalistBlack {
      border: 1px solid #000000;
      width: 100%;
      height:1px;
      text-align: left;
      border-collapse: collapse;
    }
    .divTable.minimalistBlack .divTableCell, .divTable.minimalistBlack .divTableHead {
      border: 1px solid #000000;
    }
    .divTable.minimalistBlack .divTableBody .divTableCell {
      font-size: 13px;
    }
    .divTable.minimalistBlack .divTableHeading {
      background: #CFCFCF;
      background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 88%);
      background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 88%);
      background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 88%);
      border-bottom: 0px solid #000000;
    }
    .divTable.minimalistBlack .divTableHeading .divTableHead {
      font-size: 15px;
      font-weight: bold;
      color: #000000;
      text-align: left;
    }
    .minimalistBlack .tableFootStyle {
      font-size: 14px;
      font-weight: bold;
      color: #000000;
      border-top: 0px solid #000000;
    }
    .minimalistBlack .tableFootStyle {
      font-size: 14px;
    }
    /* DivTable.com */
    .divTable{ display: table; }
    .divTableRow { display: table-row; }
    .divTableHeading { display: table-header-group;}
    .divTableCell, .divTableHead { display: table-cell;}
    .divTableHeading { display: table-header-group;}
    .divTableFoot { display: table-footer-group;}
    .divTableBody { display: table-row-group;}
        </style>
    </head>
    <body>
      <header>
        <%- include('nav3.ejs') %>
    </header>
    &nbsp;
    <div></div>
    <div class="container input-group mb-2">
      <input class="form-control">
      <button class="input-group-append btn btn-danger" id="search">검색</button>
    </div>

    <h3>상품목록 조회</h3>
    <div></div>
    &nbsp;
    <div class="divTable minimalistBlack">
      <div class="divTableHeading">
        <div class="divTableRow">
        <div class="divTableHead">이미지</div>
        <div class="divTableHead">상품번호</div>
        <div class="divTableHead">상품명</div>
        <div class="divTableHead">상세설명</div>
        <div class="divTableHead">가격</div>
        <div class="divTableHead">카테고리분류</div>
        <div class="divTableHead">향수종류</div>
        <div class="divTableHead">향구성</div>
        <div class="divTableHead">수량</div>
        <div class="divTableHead">삭제</div>
        </div>
      </div>
      <div class="divTableBody">
        <% for (var i = 0; i < notes.length; i++){ %>
        <div class="divTableRow">
          <div class="divTableCell"><%=notes[i].이미지%></div>
          <div class="divTableCell"><%=notes[i]._id%></div>
          <div class="divTableCell"><%=notes[i].상품명%></div>
          <div class="divTableCell"><%=notes[i].상세설명%></div>
          <div class="divTableCell"><%=notes[i].가격%>원</div>
          <div class="divTableCell"><%=notes[i].카테고리분류%></div>
          <div class="divTableCell"><%=notes[i].향수종류%></div>
          <div class="divTableCell"><%=notes[i].향구성%></div>
          <div class="divTableCell"><%=notes[i].수량%></div>
          <div class="divTableCell"><button type="button"  class="delete2"  data-id="<%= notes[i]._id %>">삭제</button></div>
          </div>
          <% } %>
      </div>
    </div>
    <div>
      <a href="/write"><h1>상품등록</h1></a>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $('#search').click(function(){
          var 입력한값 = $('#search-input').val();
          window.location.replace('/search?value=' + 입력한값)
        });
    </script>
    <script type="text/javascript">
      $('.delete2').click(function(e){
        var 상품번호 = e.target.dataset.id;
        var 지금누른거 = $(this);
        $.ajax({
          method : 'DELETE',
          url : '/delete2',
          data : { _id : 상품번호 }
        }).done((결과)=>{
          console.log('성공했어욤');
          지금누른거.parent('divTableRow').fadeOut();
        })
       
      });
    </script>
    <script type="text/javascript">
      $('.update').click(function(e){
        var id = $(this).data('id');
        console.log('pointer')
        $.ajax({
          method: "GET",
                url: "/fetchdata",
                data: { id:  id },
              }).done(function( data ) {
                $('#id').val(data[0]['_id']);
                $('#prdcategory').val(data[0]['prdcategory']);
                $('#prdname').val(data[0]['prdname']);
                $('#prdprice').val(data[0]['prdprice']);
                $('#pfcategory').val(data[0]['pfcategory']);
                $('#prdperfume').val(data[0]['prdperfume']);
                $('#prdcount').val(data[0]['prdcount']);
                $('#imgpath').val(data[0]['imgpath']);
                $('#explain').val(data[0]['explain']);
                $("#subbtn").val('Edit Product');
                $('#form1').attr('action', '/edit');
              });
            });
    </script>
    </body>
    </html>

     

    <script type="text/javascript">
        $('#search').click(function(){
          var 입력한값 = $('#search-input').val();
          window.location.replace('/search?value=' + 입력한값)
        });
    </script>

     

    강의와 같게 설정만 스텐다드만 했습니다.

    #34454

    codingapple
    키 마스터

    무엇이 안됩니까 

    #34472

    서영석
    참가자

    검색버튼을 누르고 value=underfine이 되며 찾지 못하고 있습니다.

    #34483

    codingapple
    키 마스터

    id="search-input" 인 요소가 없는데 거기 이벤트리스너를 붙여서 그런듯요 

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠