如何创建自动完成
学习如何创建自动完成功能。
自动完成
请开始输入：
创建自动完成表单
第一步 - 添加 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 Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","คอสตาริกา, โคตดิวาเร, โครเอเชีย, คิวบา, คูราโซ, ไซปรัส, ชิชเชีย, ไดน์แมน, จิบูติ, โดมินิกา, โดมินิกัน ริปับลิก, อีเควาดอร์, อียิปต์, เอลซัลวาดอร์, กินีเบีย, เอริเทรีย, เอสโตเนีย, เอธิโอเปีย, ฟอล์กแลนด์, ฟาโรเอ, ฟิจิ, ฟินแลนด์, ฝรั่งเศส, ฝรั่งเศส โพลินีเซีย, ฝรั่งเศส ตะวันตก, กาบอง, จอร์เจีย, เยอรมันย์, กานา, กิบรัลตาร์, กรีซ, กรีนแลนด์, กรีนาดา, กวาม, กวาเมลา, กวีเนีย, กวีเนียบิสาว, กายานา, ฮาติ, โฮนดุรัส, ฮ่องกง, ฮังการี, ไอซ์แลนด์, อินเดียประเทศอินโดนีเซีย, ประเทศอิหร่าน, ประเทศอิรัก, ประเทศไอร์แลนด์, ประเทศไอส์แลนด์ออฟแมน, ประเทศอิสราเอล, ประเทศอิตาลี, ประเทศเจมายกา, ประเทศญี่ปุ่น, ประเทศเจอร์ซีย์, ประเทศจอร์แดน, ประเทศคาซัคสถาน, ประเทศเคนยา, ประเทศคีริบาติ, ประเทศโคซอโซโว, ประเทศคุเวต, ประเทศกิร์กีซสถาน, ประเทศลาออส, ประเทศลัตเวีย, ประเทศเลบานอน, ประเทศเลโซโท, ประเทศลิเบเรีย, ประเทศลิเบีย, ประเทศลิชเทนสไตน์, ประเทศลิทัวเนีย, ประเทศลักเซมเบิร์ก, ประเทศมาเก๊า, ประเทศมาเซดอน, ประเทศมาดากัสการ์, ประเทศมาลาวี, ประเทศมาเลย์เซีย, ประเทศมาลดีฟส, ประเทศมาลี, ประเทศมอลตา, ประเทศมาร์shall ไอแลนด์, ประเทศมอริทาเนีย, ประเทศมอริเชียส, ประเทศเม็กซิโก, ประเทศไมโครนีเซีย, ประเทศมอลโดวา, ประเทศมอนาโก, ประเทศมองโกเลีย, ประเทศมอนเตเนโกร, ประเทศมอนต์เซอร์ราต, ประเทศโมร็อกโก, ประเทศโมซามบิก, ประเทศพม่า, ประเทศนามีเบีย, ประเทศนาโอโรประเทศเนปาล, ประเทศเนเธอร์แลนด์, ประเทศนีเธอร์แลนด์แอนทิลลีส, ประเทศนิวกaledonia, ประเทศนิวซีแลนด์, ประเทศนิการากัว, ประเทศไนเจอร์, ประเทศไนจีเรีย, ประเทศเกาหลีเหนือ, ประเทศนอร์เวย์, ประเทศโอมาน, ประเทศปากีสถาน, ประเทศปาลาว, ประเทศปาเลสไตน์, ประเทศปานามา, ประเทศปาปัวนิวกีเนีย, ประเทศปารากวาย, ประเทศเปรู, ประเทศฟิลิปปินส์, ประเทศโปแลนด์, ประเทศโปรตุเกส, ประเทศปูเอร์โตริโก, ประเทศกาตาร์, ประเทศเรียวนัน, ประเทศโรมาเนีย, ประเทศรัสเซีย, ประเทศรวันดา, ประเทศแซนปีแอร์และมิกเกลอง, ประเทศซาโมา, ประเทศซานมารีโน, ประเทศซาโอโตเมและปรินซีเป, ประเทศซาอุดิอาระเบีย, ประเทศเซเนกัล, ประเทศเซอร์เบีย, ประเทศเซย์เชลส์, ประเทศไซเออร์ราลีโอน, ประเทศสิงคโปร์, ประเทศสโลวาเกีย, ประเทศสโลวีเนีย, ประเทศโซโลมอน, ประเทศโซมาเลีย, ประเทศแอฟริกาใต้, ประเทศเกาหลีใต้, ประเทศเซาท์ซูดานประเทศสเปน, ประเทศศรีลังกา, ประเทศเซนต์คิตส์และเนวิส, ประเทศเซนต์หลุเซีย, ประเทศเซนต์แวนเซียน, ประเทศซูดาน, ประเทศซูรินาม, ประเทศสวาซิแลนด์, ประเทศสวีเดน, ประเทศสวิตเซอร์แลนด์, ประเทศซีเรีย, ประเทศไต้หวัน, ประเทศตาจิกิสถาน, ประเทศตานซาเนีย, ประเทศไทย, ประเทศติมอร์-ลี-เสต, ประเทศโทโก, ประเทศโทงงา, ประเทศเซนต์ลุซียานและโทโบโก, ประเทศตูนิเซีย, ประเทศตุรกี, ประเทศตุร์กเมนิสถาน, ประเทศเซนต์คิตส์และไคคอส, ประเทศทูวาลู, ประเทศยูกันดา, ประเทศยูเครน, ประเทศสหรัฐอาหรับเอมิเรตส์, ประเทศสหราชอาณาจักร, ประเทศสหรัฐอเมริกา, ประเทศอุรุกวาย, ประเทศอุซเบกิสถาน, ประเทศวานุอาตู, ประเทศเวนิซุเอลา, ประเทศเวียดนาม, ประเทศแวร์จิ้นไอแลนด์ (US), ประเทศยะเมน, ประเทศซามเบีย, ประเทศซิมบับเว}
ขั้นที่สาม - เพิ่ม CSS:
ตัวแทนต้องมีการจัดตั้งตำแหน่งเรlatively。
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.autocomplete {
/* ตัวแทนต้องมีการจัดตั้งตำแหน่งเรlatively: */
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;
}
ขั้นที่สี่ - เพิ่ม 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);
/* วนลูปเพื่อเลือกแต่ละรายการในแนวทางของตัวแปร arr... */
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++;
/* และทำให้รายการปัจจุบันชัดเจนขึ้น: */
addActive(x);
} else if (e.keyCode == 38) { //up
/* ถ้ากดบทุกภาษาที่ชื่อประจุบันด้านบน ลดค่าประมาณปัจจุบัน: */
currentFocus--;
/* และทำให้รายการปัจจุบันชัดเจนขึ้น: */
addActive(x);
} else if (e.keyCode == 13) {
/* ถ้ากดบทุกภาษาที่ชื่อ ENTER ก็หยุดยั้งการยื่นใบฟอร์ม: */
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>
