大家好，我对这个自动完成输入有问题：https://codepen.io/australopythecus/pen/RwLyGpv(邮政编码郊区州(
当我像这样更改数组值时，它停止工作https://codepen.io/australopythecus/pen/NWaMbbg(郊区州邮政编码(
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
/*make the matching letters bold:*/
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
document.getElementById("location").readOnly = true;
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
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]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
/*An array containing all the postcodes in Australia :*/
var postcodes = ['Aarons Pass NSW 2850', 'Abba River WA 6280', 'Abbey WA 6280', 'Abbeyard VIC 3737', 'Abbeywood QLD 4613', 'Abbotsbury NSW 2176', 'Abbotsford NSW 2046', 'Abbotsford VIC 3067', 'Abbotsford QLD 4670', 'Abbotsham TAS 7315', 'Abeckett Street VIC 8006', 'Abels Bay TAS 7112', 'Abercorn QLD 4627', 'Abercrombie NSW 2795', 'Abercrombie River NSW 2795', 'Aberdare NSW 2325', 'Aberdeen NSW 2336', 'Aberdeen TAS 7310', 'Aberfeldie VIC 3040', 'Aberfeldy VIC 3825', 'Aberfoyle NSW 2350', 'Aberfoyle Park SA 5159', 'Aberglasslyn NSW 2320', 'Abergowrie QLD 4850', 'Abermain NSW 2326', 'Abernethy NSW 2325', 'Abingdon Downs QLD 4871', 'Abingdon Downs QLD 4892', 'Abington NSW 2350', 'Abington QLD 4660', 'Abminga Station SA 5440', 'Acacia Creek NSW 2476', 'Acacia Gardens NSW 2763', 'Acacia Hills NT 822', 'Acacia Hills TAS 7306', 'Acacia Park NSW 2350', 'Acacia Plateau NSW 2476', 'Acacia Ridge QLD 4110', 'Acacia Ridge Bc QLD 4110', 'Acacia Ridge Dc QLD 4110', 'Acheron VIC 3714', 'Acland QLD 4401', 'Acton ACT 2601', 'Acton TAS 7320', 'Acton Park WA 6280', 'Acton Park TAS 7170', 'Ada VIC 3833', 'Adaminaby NSW 2629', 'Adams Estate VIC 3984', 'Adamstown NSW 2289', 'Adamstown Heights NSW 2289', 'Adamsvale WA 6375', 'Adare QLD 4343', 'Adavale QLD 4474', 'Addington VIC 3352', 'Adelaide SA 5000', 'Adelaide SA 5001', 'Adelaide SA 5800', 'Adelaide SA 5810', 'Adelaide SA 5839', 'Adelaide Airport SA 5950', 'Adelaide Bc SA 5000', 'Adelaide Lead VIC 3465', 'Adelaide Park QLD 4703', 'Adelaide River NT 846', 'Adelaide University SA 5005', 'Adelong NSW 2729', 'Adjungbilly NSW 2727', 'Advancetown QLD 4211', 'Adventure Bay TAS 7150', 'Aeroglen QLD 4870', 'Afterlee NSW 2474', 'Agery SA 5558', 'Agnes VIC 3962', 'Agnes Banks NSW 2753', 'Agnes Water QLD 4677', 'Agnew WA 6435', 'Aherrenge NT 872', 'Ailsa VIC 3393', 'Ainslie ACT 2602', 'Aintree VIC 3336', 'Airdmillan QLD 4807', 'Airds NSW 2560', 'Aire Valley VIC 3237', 'Aireys Inlet VIC 3231', 'Airlie Beach QLD 4802', 'Airly NSW 2846', 'Airly VIC 3851', 'Airport West VIC 3042', 'Airville QLD 4807', 'Aitkenvale QLD 4814', 'Aitkenvale Bc QLD 4814', 'Ajana WA 6532', 'Akaroa TAS 7216', 'Akolele NSW 2546', 'Akuna Bay NSW 2084', 'Alabama Hill QLD 4820', 'Alanvale TAS 7248', 'Alawa NT 810', 'Alawoona SA 5311', 'Albacutya VIC 3424', 'Albanvale VIC 3021', 'Albany WA 6330', 'Albany WA 6332', 'Albany Creek QLD 4035', 'Albany Dc WA 6331', 'Albany Po WA 6332', 'Albert NSW 2873', 'Albert Park VIC 3206', 'Albert Park SA 5014', 'Alberta QLD 4702', 'Alberton VIC 3971', 'Alberton QLD 4207', 'Alberton SA 5014', 'Alberton TAS 7263', 'Alberton West VIC 3971', 'Albinia QLD 4722', 'Albion VIC 3020', 'Albion QLD 4010', 'Albion QLD 4822', 'Albion Bc QLD 4010', 'Albion Dc QLD 4010', 'Albion Heights TAS 7050', 'Albion Park NSW 2527', 'Albion Park Rail NSW 2527', 'Albury NSW 2640', 'Albury Msc NSW 2708', 'Alcomie TAS 7330', 'Aldavilla NSW 2440', 'Alderley QLD 4051', 'Aldershot QLD 4650', 'Aldersyde WA 6306', 'Aldgate SA 5154', 'Aldinga SA 5173', 'Aldinga Beach SA 5173', 'Aldoga QLD 4694', 'Alectown NSW 2870', 'Alexander Heights WA 6064', 'Alexandra VIC 3714', 'Alexandra QLD 4740', 'Alexandra Bridge WA 6288', 'Alexandra Headland QLD 4572', 'Alexandra Hills QLD 4161', 'Alexandria NSW 1435', 'Alexandria NSW 2015', 'Alexandria QLD 4825', 'Alexandria Mc NSW 2004', 'Alford SA 5555', 'Alfords Point NSW 2234', 'Alfred Cove WA 6154', 'Alfredton VIC 3350', 'Alfredtown NSW 2650', 'Algester QLD 4115', 'Ali Curung NT 872', 'Alice NSW 2469', 'Alice NSW 2470', 'Alice Creek QLD 4610', 'Alice River QLD 4817', 'Alice Springs NT 870', 'Alice Springs NT 871', 'Alice Springs NT 872', 'Alison NSW 2259', 'Alison NSW 2420', 'Alkimos WA 6038', 'Allambee VIC 3823', 'Allambee Reserve VIC 3871', 'Allambee South VIC 3871', 'Allambie NSW 2100', 'Allambie Heights NSW 2100', 'Allan QLD 4370', 'Allandale NSW 2320', 'Allandale QLD 4310', 'Allandale Station SA 5723', 'Allanooka WA 6525', 'Allans Flat VIC 3691', 'Allansford VIC 3277', 'Allanson WA 6225', 'Allawah NSW 2218', 'Alleena NSW 2671', 'Allenby Gardens SA 5009', 'Allendale VIC 3364', 'Allendale East SA 5291', 'Allendale North SA 5373', 'Allens Rivulet TAS 7150', 'Allenstown QLD 4700', 'Allenview QLD 4285', 'Allestree VIC 3305', 'Allgomera NSW 2441', 'Allgomera Creek NSW 2441', 'Alligator Creek QLD 4740', 'Alligator Creek QLD 4816', 'Allingham QLD 4850', 'Allora QLD 4362', 'Alloway QLD 4670', 'Allworth NSW 2425', 'Allynbrook NSW 2311', 'Alma VIC 3465', 'Alma SA 5401', 'Alma WA 6535', 'Alma Park NSW 2659', 'Almaden QLD 4871', 'Almonds VIC 3727', 'Almurta VIC 3979', 'Alonnah TAS 7150', 'Aloomba QLD 4871', 'Alpana SA 5730', 'Alpha QLD 4724', 'Alphington VIC 3078', 'Alpine NSW 2575', 'Alpurrurulam QLD 4825', 'Alroy QLD 4825', 'Alsace QLD 4702', 'Alstonvale NSW 2477', 'Alstonville NSW 2477', 'Altandi QLD 4109', 'Alton Downs QLD 4702', 'Alton Downs Station SA 5733', 'Altona VIC 3018', 'Altona SA 5351', 'Altona East VIC 3025', 'Altona Gate VIC 3025', 'Altona Meadows VIC 3028', 'Altona North VIC 3025', 'Alumy Creek NSW 2460', 'Alva QLD 4807', 'Alvie VIC 3249', 'Alyangula NT 885', 'Amamoor QLD 4570', 'Amamoor Creek QLD 4570', 'Amaroo NSW 2866', 'Amaroo ACT 2914', 'Amaroo QLD 4829', 'Amata NT 872', 'Amata SA 872', 'Ambania WA 6632', 'Ambarvale NSW 2560', 'Amber QLD 4871', 'Ambergate WA 6280', 'Amberley QLD 4306', 'Ambleside TAS 7310', 'Ambrose QLD 4695', 'Amby QLD 4462', 'Amelup WA 6338', 'American Beach SA 5222', 'American River SA 5221', 'Amherst VIC 3371', 'Amiens QLD 4352', 'Amiens QLD 4380', 'Amity QLD 4183', 'Amity Point QLD 4183', 'Ammerdown NSW 2800', 'Amoonguna NT 872', 'Amoonguna NT 873', 'Amor VIC 3825', 'Amosfield NSW 4380', 'Amphitheatre VIC 3377', 'Amphitheatre VIC 3468', 'Ampilatwatja NT 872', 'Amyton SA 5431', 'Anabranch North NSW 2648', 'Anabranch South NSW 2648', 'Anakie VIC 3213', 'Anakie VIC 3221', 'Anakie QLD 4702', 'Anakie Siding QLD 4702', 'Anama SA 5464', 'Anambah NSW 2320', 'Anangu Pitjantjatjara Yankunytjatjara SA 872', 'Anatye NT 872', 'Ancona VIC 3715', 'Andamooka SA 5722', 'Andamooka Station SA 5722', 'Andergrove QLD 4740', 'Anderleigh QLD 4570', 'Anderson VIC 3995', 'Ando NSW 2631', 'Andover TAS 7120', 'Andrews SA 5454', 'Andrews Farm SA 5114', 'Andromache QLD 4800', 'Anduramba QLD 4355', 'Anembo NSW 2621', 'Angas Plains SA 5255', 'Angas Valley SA 5238', 'Angaston SA 5353', 'Angellala QLD 4455', 'Angelo River WA 6642', 'Angepena SA 5732', 'Angip VIC 3393', 'Angle Park SA 5010', 'Angle Vale SA 5117', 'Angledale NSW 2550', 'Angledool NSW 2832', 'Angledool NSW 2834', 'Anglers Paradise QLD 4216', 'Anglers Reach NSW 2629', 'Anglers Rest VIC 3898', 'Anglesea VIC 3230', 'Angorigina SA 5730', 'Angourie NSW 2464', 'Angurugu NT 822', 'Angus NSW 2765', 'Angus Place NSW 2845', 'Anindilyakwa NT 822', 'Anketell WA 6167', 'Anmatjere NT 872', 'Anna Bay NSW 2316', 'Anna Creek SA 5723', 'Annadale SA 5356', 'Yuroke VIC 3063', 'Yuruga QLD 4850', 'Yuulong VIC 3237', 'Zadows Landing SA 5254', 'Zanthus WA 6434', 'Zara NSW 2484', 'Zeehan TAS 7469', 'Zeerust VIC 3634', 'Zetland NSW 2017', 'Zillmere QLD 4034', 'Zilzie QLD 4710', 'Zuccoli NT 832', 'Zumsteins VIC 3401', 'Zuytdorp WA 6536'];
/*initiate the autocomplete function on the "myInput" element, and pass along the countries array as possible autocomplete values:*/
autocomplete(document.getElementById("location"), postcodes);.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:
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 {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}<div class="form-group autocomplete">
<input type="text" id="location" name="location" class="form-control" placeholder="Postcode">
</div>我做错了什么？
在第二个例子中，我得到了一个未捕获的TypeError：无法读取未定义的属性"substr"，但在第一个例子中没有。
正如@epascarello所指出的，问题是数组包含空元素，如："Arkaroola Village SA 5701"、"Arkell NSW 2795"、"–Codepen已纠正并工作。谢谢