autocomplete 다운로드 - autocomplete 소스코드 다운로드

autocomplete

기타 소스코드

v1.17.7

다운로드

자동 완성 환경을 빠르게 구축할 수 있는 JavaScript 라이브러리

시작하는 데 필요한 것은 다음과 같습니다.

경험을 주입하는 컨테이너
자동 완성을 채울 데이터
모든 가상 DOM 솔루션(JavaScript, Preact, React, Vue 등)

자동 완성 결과를 채우는 데이터를 소스라고 합니다. 정적인 검색어 세트, Algolia 색인과 같은 외부 소스의 검색 결과, 최근 검색어 등 원하는 것은 무엇이든 소스에서 사용할 수 있습니다.

두 가지 필수 매개변수( container 및 getSources )만 구성하면 대화형 자동 완성 환경을 경험할 수 있습니다. 라이브러리는 입력을 생성하고 상호작용성 및 접근성 속성을 제공하지만 출력할 DOM 요소를 완전히 제어할 수 있습니다 .

스크린샷

문서 • API • 플레이그라운드

설치

시작하는 데 권장되는 방법은 autocomplete-js 패키지를 사용하는 것입니다. 여기에는 JavaScript 자동 완성 환경을 렌더링하는 데 필요한 모든 것이 포함되어 있습니다.

그렇지 않고 처음부터 렌더러를 빌드하려는 경우 autocomplete-core 패키지를 설치할 수 있습니다.

모든 자동 완성 패키지는 npm 레지스트리에서 사용할 수 있습니다.

yarn add @algolia/autocomplete-js
# or
npm install @algolia/autocomplete-js

패키지 관리자를 사용하지 않는 경우 HTML script 요소를 사용할 수 있습니다.

 < script src =" https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js " > </ script >
< script >
  const { autocomplete } = window [ '@algolia/autocomplete-js' ] ;
</ script >

용법

시작하려면 자동 완성을 위한 컨테이너가 필요합니다. 아직 컨테이너가 없으면 마크업에 삽입할 수 있습니다.

 < div id = "autocomplete" > < / div >

그런 다음 autocomplete 기능을 호출하고 container 제공하여 자동 완성을 삽입하세요. CSS 선택자 또는 요소일 수 있습니다.

input 아닌 컨테이너(예: div )를 제공해야 합니다. 자동완성은 완전히 액세스 가능한 검색창을 생성합니다.

 import { autocomplete } from '@algolia/autocomplete-js' ;

autocomplete ( {
  container : '#autocomplete' ,
  // ...
} ) ;

시작하기 가이드를 계속해서 읽어보세요.

선적 서류 비치

문서에서는 자동 완성 라이브러리에 대해 알아볼 수 있는 몇 가지 방법을 제공합니다.

Sources 및 State 와 같은 기본 원칙에 대해 자세히 알아보려면 핵심 개념을 읽어보세요.
일반적인 UX 패턴을 구축하는 방법을 이해하려면 가이드를 따르세요.
매개변수 및 옵션의 전체 목록은 API 참조 를 참조하세요.
기본 구현을 포크하고 시험해 볼 수 있는 Playground를 사용해 보세요.

문서에서 자세한 내용을 확인할 수 있습니다.

지원하다

GitHub 토론

패키지

패키지	설명	선적 서류 비치
`autocomplete-js`	자동완성을 위한 JavaScript 패키지	선적 서류 비치
`autocomplete-core`	자동 완성 환경을 구축하기 위한 JavaScript 핵심 기본 요소	선적 서류 비치
`autocomplete-plugin-recent-searches`	자동 완성에 최근 검색을 추가하는 플러그인	선적 서류 비치
`autocomplete-plugin-query-suggestions`	자동 완성에 쿼리 제안을 추가하는 플러그인	선적 서류 비치
`autocomplete-plugin-algolia-insights`	Algolia Insights를 자동 완성에 추가하는 플러그인	선적 서류 비치
`autocomplete-plugin-redirect-url`	리디렉션 URL을 활성화하는 플러그인	선적 서류 비치
`autocomplete-plugin-tags`	자동 완성에서 태그 목록을 관리하고 표시하는 플러그인	선적 서류 비치
`autocomplete-preset-algolia`	자동 완성과 함께 Algolia 기능을 사용하기 위한 사전 설정	선적 서류 비치
`autocomplete-theme-classic`	자동 완성용 기본 테마	선적 서류 비치