한식 메뉴 렌더링 3일차

오늘은 한식 메뉴 렌더링한 것에 필터, 검색 기능을 추가하려고 노력해보았다. 아래가 오늘의 결과물이다. 

 

삐져나온 텍스트가 증명하듯 영 잘 되지는 않았다. 우선 빨간색 간식 버튼에 필터 기능을, 하얀색과 회색 텍스트 박스에 검색 기능을 추가하려고 했는데, 구성한 코드 자체가 잘못되어서 번번히 실패했다. 

 

$("#postingbtn").click()

을 통해서 빨간색 버튼을 클릭하면

=>이전에 구성한 반복문들이 실행되어 리스트를 렌더링하도록 하여

=>클릭할 때마다 다른 리스트가 출력되고

=>페이지에 상기의 두 개의 메뉴판 중 하나씩만 표시되도록 하고 싶었다. 

 

하지만 이런 방법이 오늘 학습 시간이 끝날 때까지 실패를 했으니, 다음에는 display = "none" 같은 것들을 이용해서 버튼을 클릭하면 비표시로 전환하도록 시도해 볼 것이다. 

 

또 다음에는 검색 기능을 구현하기 위해 더 다양한 시도들을 할 것이다. 내가 생각한 검색 기능은 하얀 input 박스에 검색어를 입력하면 해당 검색어가 포함되어 있는 리스트를 회색 박스에 나열하는 것이다. 리스트의 수와 리스트 자체의 정보량도 적은 지금에서는 큰 도움이 되지 않는 기능이지만 나중에 리스트의 정보량을 늘리게 되면 유의미한 기능이 될 수 있을 것이다. 물론 이러한 것들은 먼저 기능을 구현하고 나서 더 생각해볼 문제이긴 하다. 다음에는 더 잘할 수 있겠지...