5월에 우리는 개선된 상세 시간 보고서를 출시했습니다. 이 보고서는 데이터 필터링을 위한 개선된 인터페이스를 포함하고 있습니다. 필터는 일반 HTML 선택 상자에 비해 상당한 개선을 이루었기에, 우리는 이 코드를 세상과 공유하기로 결정했습니다. 오늘, 우리는 이를 Chosen이라는 플러그인으로 출시합니다 (jQuery 및 Prototype에서 사용 가능).

HTML 양식을 만들 때, 선택 상자는 긴 옵션 목록을 제시하는 데 자주 사용됩니다. 그러나 선택 요소에 옵션이 몇 개 이상 포함되면 사용자가 탐색하기 어려워집니다. 필드에 입력하는 것이 항상 예상대로 작동하지 않으며 (많은 사용자가 이 옵션을 인식하지 못합니다), 수십 또는 수백 개의 선택지를 스크롤하는 것은 느리고 지루합니다. 이러한 문제는 옵션의 순서가 즉시 명확하지 않을 때 더욱 두드러집니다.

Chosen은 검색 기반 필터링을 추가하여 선택 상자를 개선하는 것을 목표로 합니다. 사용자가 Chosen 요소를 클릭하면 커서가 검색 필드에 위치합니다. 사용자가 입력할 때, 검색어와 일치하지 않는 옵션은 숨겨지고 유용한 결과만 남습니다. 사용자는 표준 선택 요소와 마찬가지로 마우스로 하이라이트하고 클릭하거나 키보드를 사용하여 선택지를 탐색할 수 있습니다 (위쪽 및 아래쪽 화살표로 하이라이트를 변경하고 Enter로 선택합니다).

또한, 여러 선택 요소는 선택된 옵션을 표시하기 위한 개선된 인터페이스를 갖추고 있습니다. 사용자가 선택한 옵션은 요소 상단에 박스로 표시되며 항상 보입니다. 단일 클릭이나 백스페이스를 사용하여 제거할 수 있습니다.

Chosen 사용하기

개발자에게 Chosen을 사용하는 것은 매우 간단합니다. Chosen은 표준 HTML 선택 요소를 점진적으로 향상시켜 작동하므로, 전달된 데이터를 처리하기 위해 백엔드 변경이 필요하지 않습니다. Chosen 필드를 통해 선택된 옵션은 (이제 숨겨진) HTML 필드를 변경하고, 데이터는 정상적으로 양식 제출 시 전달됩니다.

우리는 Chosen을 CoffeeScript로 작성했습니다. 이는 자바스크립트를 작성하는 데 훨씬 더 읽기 쉬운 문법을 제공합니다. CoffeeScript 덕분에 프레임워크에 독립적인 객체 지향 자바스크립트를 유지하는 것이 훨씬 쉬워졌고, 우리는 jQuery 및 Prototype 버전의 플러그인 모두에 대해 동일한 코드를 기반으로 사용할 수 있었습니다. Chosen의 소스를 가져가면 CoffeeScript 버전도 함께 제공됩니다.

한번 시도해 보시겠어요? github에서 소스를 가져가세요.

오픈 소스, FTW

Harvest는 매일 오픈 소스 소프트웨어 커뮤니티의 기여에 의존하며, 우리는 이를 되돌려줄 수 있어 기쁩니다. 우리는 여러 오픈 소스 프로젝트를 유지하고 있으며, 그 컬렉션을 계속 추가할 계획입니다. Chosen이나 우리의 프로젝트에 클론, 포크 및 기여해 주시기를 권장합니다.

훌륭한 개발 팀과 함께 일하고 세상과 작업을 공유하는 것이 당신의 취향이라면, 왜 우리와 함께하지 않으세요? 우리는 몇몇 훌륭한 개발자를 찾고 있습니다.