自動補完の作成方法
自動補完機能の作成方法を学びます。
自動補完
入力を開始してください：
自動補完フォームの作成
第一步 - HTMLの追加：
<!-- 確保表单已关闭自动完成功能： -->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>
第二步 - JavaScript 配列の作成：
世界上すべての国および地域を含む配列：
var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central African Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","코스타리카", "코트디부아르", "크로아티아", "キューバ", "쿠라소", "키프로", "체코", "덴마크", "지부티", "도미니카", "도미니카 공화국", "에콰도르", "egypt", "에스테로니아", "에티오피아", "포클랜드 제도", "ファ로 제도", "피지", "핀란드", "프랑스", "프랑스 폴리네시아", "프랑스 western indies", "가봉", "감비아", "グル지아", "독일", "가나", "기برalta", "그리스", "그린란드", "그레나다", "균마", "괌", "グват말라", "귄시", "기니", "기니비사우", "圭아나", "하이티", "هonduras", "홍콩", "헝가리", "アイ슬란드", "인도", ""인도네시아, 이란, 이라크, 아일랜드, 맨岛的, 이스라엘, 이탈리아, 자메이카, 일본, 제이지, 요르단, 카자흐스탄, 케니아, 키리바스, 코소보, 쿠웨이트, 키르기스스탄, 라오스, 레토바리아, 레바논, 레소토, 리베리아, 리비아, 리히텐슈타인, 리투아니아, 룩셈부르크, 마카오, 마케도니아, madagascar, 맬라위, 말레이시아, 말디브, 말리, 말타, 마셜 제도, 모리타니아, 모리스, 멕시코, 마이크로네시아, 모尔多바, 모나코, 몽골, 몬테네그로, 몬테사우나트, 모로코, 모잠비크, myanmar, 나미비아, 나우루"네팔", "네덜란드", "네덜란드 앤틸리스", "뉴칼레도니아", "뉴질랜드", "니카라과", "니제르", "나이지리아", "북한", "노르웨이", "오만", "파키스탄", "팔라우", "巴勒斯坦", "파나마", "파푸아뉴기니", "파라과이", "페루", "필리핀", "폴란드", "포르투갈", "포르투리코", "카타르", "레위통", "루마니아", "러시아", "루旺다", "聖피에르와미클로", "소모아", "산마리노", "사오톤레와프리니치", "사우디아라비아", "세네갈", "세르비아", "셰이셜", "시에라리온", "싱가포르", "스lowest니아", "스로베니아", "소로몬 제도", "소말리아", "남아프리카", "대한민국", "남수단"스페인, 스크리랑카, 스티 키츠 앤 네비스, 스티 루시아, 스티 비넌스, 수단, 수리나م, 스와질랜드, 스웨덴, 스위스, 시리아, 타이완, 타지키스탄, 탄자니아, 태국, 티모르 루슈, 토고, 톤가, 트리니다드 토바고, 터키, 터크메니스탄, 터크스 앤 케이코스, 투발루, 우간다, 우크라이나, 아랍에미리트 연합국, 영국, 미국, 우루과이, 우즈베키스탄, 바누아투, 바티칸 시티, 베네수엘라, 베트남, 미국령 비르진 제도, 예멘,赞比亚, 짐바브웨;
제3단계 - CSS 추가:
컨테이너는 "상대" 위치를 가져야 합니다。
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.autocomplete {
/* 컨테이너는 상대 위치를 가져야 합니다: */
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/* 자동 완성 항목을 컨테이너와 같은 너비로 정위치합니다: */
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/* 항목에 마우스를 올릴 때: */
background-color: #e9e9e9;
}
.autocomplete-active {
/* 아이콘 키로 항목을 탐색할 때: */
background-color: DodgerBlue !important;
color: #ffffff;
}
제4단계 - JavaScript 추가:
function autocomplete(inp, arr) {
/* 자동 완성 함수는 두 가지 매개변수가 필요합니다. 하나는 텍스트 필드 요소이고, 다른 하나는 자동 완성할 수 있는 가능한 값의 배열입니다: */
var currentFocus;
/* 텍스트 필드에 사람이 입력할 때 실행되는 함수입니다: */
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/* 이미 열린 자동 완성 값 목록을 닫습니다 */
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/* 항목(값)을 포함하는 DIV 요소를 생성합니다: */
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/* 이 DIV 요소를 자동 완성 컨테이너의 자식 요소로 추가합니다:*/
this.parentNode.appendChild(a);
/* 배열 내의 각 항목을 순회합니다... */
for (i = 0; i < arr.length; i++) {
/* 체크 항목이 텍스트 필드 값과 같은 문자로 시작하는지 확인합니다: */
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/* 각 일치하는 요소에 하나의 DIV 요소를 생성합니다: */
b = document.createElement("DIV");
/* 일치하는 글자를 강조합니다: */
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/* 현재 배열 항목의 값을 저장하는 입력 필드를 삽입합니다: */
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/* 아이템 값(DIV 요소)을 클릭할 때 함수를 실행합니다: */
b.addEventListener("click", function(e) {
/* 자동 완성 텍스트 필드의 값을 삽입합니다: */
inp.value = this.getElementsByTagName("input")[0].value;
/* 자동 완성 값 목록을 닫거나 열린 자동 완성 값 목록을 모두 닫습니다: */
closeAllLists();
});
a.appendChild(b);
}
}
});
/* 키보드에서 키를 누를 때 함수를 실행합니다: */
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/* 아래 방향 아래키를 누르면 currentFocus 변수를 증가시킵니다: */
currentFocus++;
/* 현재 항목을 더욱 눈에 띄게 만듭니다: */
addActive(x);
} else if (e.keyCode == 38) { //up
/* 위쪽 방향 아래키를 누르면 currentFocus 변수를 감소시킵니다: */
currentFocus--;
/* 현재 항목을 더욱 눈에 띄게 만듭니다: */
addActive(x);
} else if (e.keyCode == 13) {
/* 엔터 키를 누르면 양식 제출을 차단합니다: */
e.preventDefault();
if (currentFocus > -1) {
/* "활성" 항목을 클릭하도록 시뮬레이션 */
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/* 항목을 "활성"으로 분류하는 함수 */
if (!x) return false;
/* 모든 항목에서 "active" 클래스를 먼저 제거 */
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/* "autocomplete-active" 클래스 추가 */
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/* 모든 자동 완성 항목에서 "active" 클래스를 제거하는 함수 */
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/* 매개변수로 전달된 것이 아니라면 문서 내 모든 자동 완성 목록을 닫음 */
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/* 누군가 문서를 클릭할 때 실행되는 함수 */
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
다섯 번째 단계 - "myInput"에서 자동 완성 기능을 활성화하십시오:
국가 배열을 autocomplete 함수의 두 번째 인자 전달:
<script>
autocomplete(document.getElementById("myInput"), countries);
</script>
