만들고 싶었던 거
1. 인풋 값을 실시간으로 받아서 검색하기
2. 카테고리별 검색
3. 엔터 = 검색
data- 속성을 처음 써봤는데 유용하다 😨😨!!
//카테고리별 버튼
$('.categoryBtn').click(function () {
let category = $(this).attr('data-category');
let menuFilter = menuItems.filter(menu => menu.category === category);
appendMenu(menuFilter);
})
<body>
<h1 id="title">🍴MENU🍴</h1>
<div class="btn-container">
<input type="text" id="searchInput" class="form-control" placeholder="메뉴 검색"></input>
<button id="serachBtn" class="btn btn-primary">검색</button>
<button id="serachGogi" class="btn btn-primary">고기</button>
<button id="serachHansik" class="categoryBtn btn btn-primary" data-category="한식">한식</button>
<button id="serachYangsik" class="categoryBtn btn btn-primary" data-category="양식">양식</button>
<button id="serachIlsik" class="categoryBtn btn btn-primary" data-category="일식">일식</button>
</div>
<ul id="menu-list">
</ul>
</body>
알기 전에는 아래처럼 썼음ㅋㅋㅋㅋㅋㅋㅋㅋㅋ😅
쓰다보니 뭔가 더 깔끔하게 쓸 수 있을 거 같은데..하다보니..😶
//한식
$('#serachHansik').click(function () {
let menuFilter = menuItems.filter(menu => menu.category.includes('한식'));
appendMenu(menuFilter);
})
//양식
$('#serachYangsik').click(function () {
let menuFilter = menuItems.filter(menu => menu.category.includes('양식'));
appendMenu(menuFilter);
})
//일식
$('#serachIlsik').click(function () {
let menuFilter = menuItems.filter(menu => menu.category.includes('일식'));
appendMenu(menuFilter);
})클래스명 여러개 쓸 수 있다는 것도 (이제서야) 알게되고 유익한 하루였다!!!😣
