Safari의 검색필드
Written on 2006.01.12, 9:53 pm by jay
Safari 버젼 1.3부터 지원되는 재미난 기능중에 Search Field라는게 있다. osx의 검색필드의 기능과 모양을 웹에서 구현할수 있게 해주는데 적용방법은 <input type="text" />를 이용하는게 아니라 <input type="search" />를 사용하면 된다.
물론 이 코드는 표준에 맞지 않는 코드로 validation을 통과할수는 없지만 실제 사용시 기타 브라우저에서는 일반 텍스트필드로 문제없이 렌더링되는걸 볼수있다.
사용가능한 attribute
- autosave : 검색 히스토리를 저장할때 쓸 각 검색필드의 고유한 이름
- results : 검색 히스토리를 몇개까지 저장할건지를 지정
- placeholder : 사용자가 입력한 단어가 없을때 기본적으로 검색필드에 보여질 내용
적용된 모습
이런식으로 적용하면 그림과 같은 검색필드가 생성된다.
<input type="search" autosave="com.getografik.search" results="5" placeholder="search gt.grf" />
왼쪽의 화살표가 있는 돋보기를 누르면 이 검색필드를 이용한 검색 히스토리가 나타나게 되며, 오른쪽의 X버튼은 검색필드에 사용자가 입력한 텍스트가 있을경우 나타나는 입력리셋버튼이다.
응용하기 혹은 꽁수
인터페이스적인 문제로 이 검색필드엔 submit버튼이 없는게 맞지만 일반적인 검색필드에선 그렇지가 않다. 또한 기타 브라우저에서 아무리 제대로 표현된다고 해도 비표준 테그에 알러지가 생길수도 있기 때문에 safari에서만 저 코드로 출력하게 해줄 필요가 있다. 그렇게 해주면 validation 엔진이 사파리로 인식되지 않는한 W3 validation에도 문제없이 통과하게 된다. -ㅅ-ㅋ
< ?php if(eregi('Safari',$_SERVER['HTTP_USER_AGENT'])) { ?>
<input type="search" autosave="com.getografik.search" results="5" placeholder="search gt.grf" />
< ?php } else { ?>
<input type="text" /><input type="submit" value="Find" />
< ?php } ?>autosave에 관련한 재미있는 활용법
http://www.andrewescobar.com/archive/2005/06/02/search-field-history/
gt.grf에선 다음 개편때 일괄 적용하기 위해서 실험만 해보고 일단 템플릿에선 비활성화 시켜놓은 상태입니다.
