소스 코드 download_jquery를 포함한 jQuery 자동 완성 플러그인 완성기

양식을 입력할 때 이메일 주소 등을 입력하려면 이메일 이름의 첫 부분만 입력하면 @ 뒤의 내용이 자동으로 완성되며 일반적으로 사용되는 여러 이메일 주소가 있습니다. 목록에 표시되며 사용자는 이를 선택하기만 하면 됩니다. 시간과 도메인 이름 입력은 모두 플러그인 완성기에 의해 자동으로 완료됩니다.

효과 표시는 다음과 같습니다.

효과 표시 소스 코드 다운로드

HTML

먼저 jQuery 라이브러리와 플러그인 완성자.js, 물론 소스 코드 다운로드에 모두 패키지되어 있는 관련 CSS 스타일 파일을 로드하세요.

<script src="jquery.js"></script> 
<script src="completer.js"></script> 
<link href="completer.css" rel="stylesheet"> 

다음으로 페이지에서 입력 상자가 배치되어야 하는 위치에 다음 코드를 배치합니다. 이는 사용자가 이메일 주소를 입력하도록 요구하는 입력 양식입니다.

<input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail"> 

자바스크립트

$(element).completer()를 직접 호출하는 것은 매우 간단합니다. 함수 호출을 사용하지 않으려면 요소에 data-toggle="completer" 및 data-* 속성을 사용하면 됩니다. 플러그인 효과를 호출합니다.

$(function(){ 
 $("#auto-complete-email").completer({ 
  separator: "@", 
  source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"] 
 }); 
}); 

옵션 설정

와 같이 제안된 자동 완성 부분에서 입력 콘텐츠를 구분합니다.

옵션	설명	기본값
완료	입력 완료 시 실행	함수() {}
아이템태그	팝업 표시 패널의 목록 요소 태그	"리"
필터	필터 기능, 입력 후 해당 목록 내용을 먼저 필터링한 후 목록을 표시합니다	함수(val) { 반환 값 }
위치	입력 상자를 기준으로 한 팝업 목록 패널의 위치, 값은 "상단", "오른쪽", "하단", "왼쪽"입니다.	"하단"
출처	표시된 데이터가 자동으로 완성됩니다	[]
선택된 클래스	팝업 패널 옵션 선택 시 스타일	"완성자 선택"
구분자	구분 기호는 @	""
제안	true로 설정하면 추천 모드로 진입하여 입력된 내용과 자동으로 매칭됩니다	거짓
템플릿	팝업 패널 템플릿	" "
z인덱스	팝업 패널 CSS의 Z-index 값	1

완벽한 플러그인은 풍부한 옵션 설정과 메소드 호출을 제공합니다.