如何解决JavaScript自动完成功能从ID更改为Name
我的一种表格有问题。我正在使用自动完成功能来输入具有唯一Name的名称,但是每次该类都会有所不同。我想对getElementsbyName而不是ID使用自动完成功能,因为ID每次都不同。是否可以更改我的脚本,以便使用输入名称代替ID。
这是我的输入内容:
function autocomplete(searchEle,arr) {
var currentFocus;
searchEle.addEventListener("input",function (e) {
var divCreate,b,i,fieldVal = this.value;
closeAllLists();
if (!fieldVal) {
return false;
}
currentFocus = -1;
divCreate = document.createElement("DIV");
divCreate.setAttribute("id",this.id + "autocomplete-list");
divCreate.setAttribute("class","autocomplete-items");
this.parentNode.appendChild(divCreate);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0,fieldVal.length).toUpperCase() == fieldVal.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0,fieldVal.length) + "</strong>";
b.innerHTML += arr[i].substr(fieldVal.length);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click",function (e) {
searchEle.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
divCreate.appendChild(b);
}
}
});
searchEle.addEventListener("keydown",function (e) {
var autocompleteList = document.getElementById(
this.id + "autocomplete-list"
);
if (autocompleteList)
autocompleteList = autocompleteList.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(autocompleteList);
} else if (e.keyCode == 38) {
//up
currentFocus--;
addActive(autocompleteList);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (autocompleteList) autocompleteList[currentFocus].click();
}
}
});
function addActive(autocompleteList) {
if (!autocompleteList) return false;
removeActive(autocompleteList);
if (currentFocus >= autocompleteList.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = autocompleteList.length - 1;
autocompleteList[currentFocus].classList.add("autocomplete-active");
}
function removeActive(autocompleteList) {
for (var i = 0; i < autocompleteList.length; i++) {
autocompleteList[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var autocompleteList = document.getElementsByClassName(
"autocomplete-items"
);
for (var i = 0; i < autocompleteList.length; i++) {
if (elmnt != autocompleteList[i] && elmnt != searchEle) {
autocompleteList[i].parentNode.removeChild(autocompleteList[i]);
}
}
}
document.addEventListener("click",function (e) {
closeAllLists(e.target);
});
}
var animals = [
"Salaj","Bihor","Arad",];
autocomplete(document.getElementById("animal"),animals);
* {
box-sizing: border-box;
}
body {
margin: 10px;
padding: 0px;
font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
}
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: none;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
border-radius: 4px;
}
input[type="text"] {
width: 100%;
}
input[type="submit"] {
background-color: DodgerBlue;
color: #fff;
cursor: pointer;
}
.autocomplete-items {
position: absolute;
border-bottom: none;
border-top: none;
z-index: 99;
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
border: 1px solid #8e26d4;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
.autocomplete-active {
background-color: rgb(30,255,169) !important;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="form.css">
</head>
<body>
<h1>Autocomplete Example</h1>
<form autocomplete="off">
<div class="autocomplete" style="width:300px;">
<input id="animal" type="text" name="animal" placeholder="Animals" />
</div>
<input type="submit" />
</form>
<script src="script.js"></script>
</body>
</html>
谢谢大家的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。