Flexdatalist - 지원 자동 완성 플러그인

그만큼 HTML5 요소 현대 프론트 엔드 개발에 매우 유용합니다. 그러나 많은 개발자가 알지 못하는 요소 중 하나입니다..

당신이 할 수있는 입력 필드에서 작동합니다. 입력에 대한 특정 값을 자동으로 제안합니다.. 기본 설정은 괜찮아 보입니다. 자동 제안 데이터 사용자와 함께 멋진 효과를 만들기위한 코딩 팁을 다뤘습니다..

그러나 플러그인으로 작업하다 와 같은 탄력적 인. 그것 더 많은 브라우저 배열 지원 당신을 데이터리스트의 디자인을 완벽하게 커스터마이즈.

모든 사용자가 자동 완성 기능과 기본 HTML5 데이터 목록이 필요하지는 않지만 플러그인을 사용하지 않아도됩니다. 그러나 Flexdatalist는 아마도 아마도 최고의 제품 일 것입니다. 네이티브 데이터리스트 행동을 토대로한다. 추가 할 항목 :

그 모두 jQuery로 구동, 그렇게하면 최신 버전의 사본이 필요하다. 이 실행을 얻으려면. 또한 자체 CSS 스타일 시트가 함께 제공됩니다. HTTP 요청을 줄이기 위해 하나의 CSS 파일에 결합하고 싶을 수도 있습니다..

찾을 수 있습니다. 전체 설정 지침 다음을 포함하는 메인 데모 페이지에서 Flexdatalist 파일에 대한 다운로드 링크.

다음과 같이 설정하는 것이 매우 간단합니다. 자바 스크립트 한 줄. 기본적으로 플러그인 모든 입력을 클래스와 함께 타겟팅합니다. .신축성있는 사람, 그래서 코드에 추가하면 결과를보기에 충분합니다..

방금 추가 한 요소를 입력 필드에 넣고 Flexdatalist가 나머지를 처리합니다. 그것은 목록의 자동 스타일 지정, 선택적 설명 텍스트 포함.

여분의 텍스트를 추가하는 가장 간단한 방법은 JSON 파일을 통해 너는 할 수있어. 데이터 속성을 통해 입력에 연결하십시오..

예를 들어, Flexdatalist 데모 페이지를 확인해보십시오. “국가” 속성이있는 입력 필드 data-data = 'countries.json'. 이것은 원격 파일을 참조합니다. 모든 원시 입력 데이터를 외부 적으로 저장합니다..

할 수있는 분야가 너무 많습니다. 페이지 속도를 약간 늦추십시오.. 그러나 많은 사이트가 한 페이지에 이러한 datalist 양식 중 몇 개 이상을 실행한다고 상상할 수 없습니다.이 jQuery 플러그인을 사용한다고해도 여전히 꽤 빠르다..

시작하려면 GitHub 레포를 방문하여 사본을 다운로드하십시오.. 여기에는 메인 데모 페이지 링크 또한 설정, JavaScript 옵션 및 많은 샘플 코드 조각에 대한 설명서가 있습니다..