[portfolio] 반응하는 검색창 구현

　부장님 말씀이 아직도 귀에 쟁쟁합니다. "이레야, 웹의 기본 정신이 무엇이냐. 그건 첫째로 개방 정신, 둘째로 참여 정신, 마지막으로 공유 정신이다." 이 말이 왜 제 마음에 꽂혔는지 아직도 이해할 수 없습니다. 그냥 그 말이 좋아서 사무실 책상 옆에 적어두고 수시로 보곤 했습니다.

웹, 정확히는 월드 와이드 웹(www)을 이용하는 사람들은 개방된 곳에 참여하여 정보를 공유합니다. '정보의 바다'로 불리는 인터넷에서 가장 빈번하게 하는 작업은 검색입니다. 반응하는 검색창에서는 보다 빠른 검색을 위해 비동기 통신을 사용했습니다. 전체 화면의 변화 없이 정보를 검색할 수 있습니다.

완성된 화면

jsp 코드

<div class="search">
	<input type="text" class="search_input"/>
    <img src="../../resources/images/review/searchIcon.png">
</div>

css 코드

.main .inner .btn-box .search {
  height: 34px;
  position: relative;
}

.main .inner .btn-box .search input {
  width: 36px;
  height: 42px;
  padding: 4px 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 5px;
  outline: none;
  background-color: #fff;
  color: #777;
  font-size: 12px;
  transition: width 0.4s;
}

.main .inner .btn-box .search input:focus {
  width: 485px;
  border-color: #ccccd1;
}

.main .inner .btn-box .search img {
  height: 24px;
  position: absolute;
  top: 4px;
  bottom: 0;
  right: 5px;
  margin: auto;
  transition: 0.4s;
}

.main .inner .btn-box .search.focused img {
  opacity: 0;
}

js 코드

    /* 검색창 관련 함수 */
    const searchEl = $(".search");
    const searchInputEl = searchEl.find("input");

    searchEl.click(function () {
      searchInputEl.focus();
      searchInputEl.val('');
    })

    searchInputEl.on("focus", function() {
      searchEl.addClass("focused");
      searchInputEl.attr("placeholder", "검색할 내용을 입력하세요.");
    });

    searchInputEl.on("blur", function() {
      searchEl.removeClass("focused");
      searchInputEl.attr("placeholder", "");
    });

    /* 검색창 enterkey 이벤트 */
    $(".search_input").on("keydown", function(e){
      if(e.keyCode === 13) {
        let list = _this.read();
        if (list) {
          _this.grid.resetData(list);
          _this.cnt = _this.readCnt();
          _this.pagination.setTotalItems(_this.cnt);
        }
      }
    });




  /* READ */
  read: function() {
    let _this = this;
    let data;

    $.ajax({
      type:"POST",
      url:"/review",
      async: false,
      contentType:"application/json; charset=utf-8",
      data: JSON.stringify({
        page: this.currentPage, // 현재 페이지
        limit: this.limit, // 한번에 몇 개의 데이터를 보여줄 것인지
        content: $(".search_input").val(),
      }),
      success: function(response){
        data = response;
        _this.grid.resetData(data);
      },
      error: function(response) {
        console.log(response);
        swal({
          title: response.responseText,
          type: 'warning'
        })
      }
    });
    return data;
  },