[Javascript] jQuery를 이용해 검색 화면 및 기능 구현

들어가며

  처음에 javascript, jQuery, ejs를 사용을 하다보면 각 역할을 유기적으로 연결하는게 참 어려운 문제라고 생각합니다. ejs에서 선언한 값을 어떻게 가져오는지, jQuery로 가져온뒤에 javascript에서는 어떻게 처리를 해야하는지도 감이 안올때가 있습니다. 간단한 예제중에 입력창에 입력을 받고, 입력한 데이터를 가져오는 버튼을 구현하면서 ejs와 jQuery, javascript를 전체적으로 연결하는 연습을 할 수 있습니다. 아래 예제는 입력창과 버튼을 ejs로 생성을 하고, javascript에서 jQuery를 이용해 input과  button의 reference의 값을 가져온 뒤에 이벤트를 바인딩하고 결과를 가져오는 예제입니다.

소스코드

search_view.ejs

  아래 소스코드는 우리가 실제로 보는 페이지를 나타냅니다. input과 btn을 이용해 생성하고 btn에는 js에서 값을 가져올 수 있도록 뒤에 value를 선언 합니다.

<% script('/javascripts/app/partials/search.js') %>  
<div class="container">
  <div class="row text-center search-bar">
      <div>
          <input type="text" id="search_keyword" class="form-control" <%if(params.searchKeyword != undefined) {%> value="<%=params.searchKeyword%>" <%}%>>
      </div>
      <div>
          <a href="javascript:;" id="search" class="btn btn-default btn-search">검색</a>
      </div>
  </div>
</div>

 

search.js

  _initView()에서는 위에서 선언한 input과 btn을 jQuery를 이용해 주소의 값을 가져옵니다. 주소를 가져온 뒤에 _bindEvent()의 함수를 통해서 btn을 클릭했을때의 이벤트를 가져오게 됩니다. 이 예제에서는 버튼을 클릭했을때, 입력값으로 넣은 검색키워드를 가지고와서 브라우저에 출력을 합니다.

/**
 * Created by banana on 8/15/16.
 */
requirejs([ "common" ], function () {
    requirejs([ "loglevel" ], function (log) {
        var _searchBtnRef = null;
        var _searchKeywordRef = null;

        var _initView = function() {
            _searchKeywordRef = $("#search_keyword");
            _searchBtnRef = $("#search");
            _bindEvent();
        }
        var _bindEvent = function() {
            _searchBtnRef.click(function() {
                var searchKeyword = _searchKeywordRef.val();
                log.info("search keyword : " + searchKeyword);
            });
        }

        var _init = function () {
            _initView();
        };
        _init();
    });
});

 

출처 : ourcstory.tistory.com/167?category=664896