230531 개발일지 TIL - onePage에서 검색창 구현 문제

원페이지에서 검색창을 구현하는데 input태그에 검색키워드를 쓰면 기존영역에 해당된 검색결과가 보이는 형식이었다.

form 태그 안에 text 타입의 input 박스가 하나만 존재 할 경우(hidden 제외) input 박스에서 엔터를 치면 자동으로 form 태그에 submit이 된다고 한다.

그래서 input 태그에서의 검색버튼 클릭시나 키보드에서 엔터 입력시

<form action="#" onsubmit="return false">
  <input type="text" id="search" onkeyup="filter()" class="form-control" placeholder="검색어를 입력하세요.">
  <span class="bi-search"></span>
</form>

과 같이 onsubmit 을 추가해 자동으로 submit 되는 것을 막아 해결하였다.

지금은 원페이지에서 해결하는 방식을 택했는데 button이 submit되었을때 페이지가 이동해 검색결과가 보여지는 것도 구현해보고 싶다.