집 >웹 프론트엔드 >JS 튜토리얼 >양식 필드를 자동으로 완성하는 Ajax 예제

양식 필드를 자동으로 완성하는 Ajax 예제

韦小宝원래의: 2017-12-31 10:24:531766검색

이 글에서는 주로 Ajax를 사용하여 양식 필드를 자동 완성하는 방법을 소개합니다. Ajax에 관심이 있는 친구는 Ajax를 사용하여 양식 필드를 자동 완성하는 예를 참고할 수 있습니다!

스크립트 1:

<!DOCTYPE html>
<html>
<head>
<title>Auto-fill Form Fields</title>
<link rel="stylesheet"href="script06.css" rel="external nofollow" >
<script src="script06.js"></script>
</head>
<body>
<form action="#">
Please enter your state:<br>
<input type="text" id="searchField" autocomplete="off"><br>
<p id="popups"> </p>
</form>
</body>
</html>

스크립트 2:

body, #searchfield {
font: 1.2em arial, helvetica,sans-serif;
}
.suggestions {
background-color: #FFF;
padding: 2px 6px;
border: 1px solid #000;
}
.suggestions:hover {
background-color: #69F;
}
#popups {
position: absolute;
}
#searchField.error {
background-color: #FFC;
}

스크립트 3:

window.onload = initAll;
var xhr = false;
var statesArray = new Array();
function initAll() {
document.getElementById("searchField").onkeyup = searchSuggest;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
if (xhr) {
xhr.onreadystatechange = setStatesArray;
xhr.open("GET", "us-states.xml",true);
xhr.send(null);
}
else {
alert("Sorry, but I couldn&#39;t create an XMLHttpRequest");
}
}
function setStatesArray() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName("item");
for (var i=0; i<allStates.length; i++) {
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}
}
else {
alert("There was a problem with the request " + xhr.status);
}
}
}
function searchSuggest() {
var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
if (str != "") {
document.getElementById("popups").innerHTML = "";
for (var i=0; i<statesArray.length;i++) {
var thisState = statesArray[i].nodeValue;
if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
var tempp = document.createElement("p");
tempp.innerHTML = thisState;
tempp.onclick = makeChoice;
tempp.className = "suggestions";
document.getElementById("popups").appendChild(tempp);
}

}
var foundCt = document.getElementById("popups").childNodes.length;
if (foundCt == 0) {
document.getElementById("searchField").className ="error";
}
if (foundCt == 1) {
document.getElementById("searchField").value = document.getElementById("popups").
firstChild.innerHTML;
document.getElementById("popups").innerHTML = "";
}
}
}
function makeChoice(evt) {
if (evt) {
var thisp = evt.target;
}
else {
var thisp = window.event.srcElement;
}
document.getElementById("searchField").value = thisp.innerHTML;
document.getElementById("popups").innerHTML = "";
}

분석은 다음과 같습니다

1 . 상태를 입력하세요.0c6dc11e160d3b678d68754cc175188a
3562d138e74919c720e2addfef1644f90c6dc11e160d3b678d68754cc175188a
9336d54a9ef3754ef19d0704387dc78a ;
이것 우리가 주목해야 할 HTML 코드입니다. 특별한 점은 autocomplete 속성입니다(이 속성은 표준을 준수하지 않습니다).
스크립트로 자동 완성을 처리하므로 이 필드에서 자동 완성을 수행하지 않도록 브라우저에 지시합니다. XMLHttp-
Request와 마찬가지로 자동 완성은 W3C 권장 사항의 일부는 아니지만 여러 브라우저에서 잘 지원됩니다.
2. document.getElementById("searchField").onkeyup = searchSuggest;
각 키 입력을 캡처하고 처리하려면 initAll()에 설정된 이벤트 핸들러가 필요합니다.
3.xhr.onreadystatechange =setStatesArray;
xhr.open("GET", "us-states.xml",true);
xhr.send(null); 레이블 노드를 만들고 레이블의 firstChild

(상태 이름 자체)를 저장합니다. 각 상태 이름은 StatesArray 배열의 요소에 저장됩니다.

5. var str = document.getElementById("searchField").value;

document.getElementById("searchField").className = "";

필드에 입력을 시작하면 searchSuggest() 이벤트 처리가 실행되는 코드입니다. 프로그램에서. 먼저 지금까지 입력된 정보인
searchField의 값을 가져옵니다. 다음으로 이 필드의 클래스 속성을 지웁니다.

6. if (str != "") {
document.getElementById("popups").innerHTML = "";

입력된 정보가 없으면 아무 작업도 수행되지 않으므로 여기에서 사용자 A가 값이 입력되면 가능한 값 목록이 나타납니다. 일부 정보가 이미 입력된 경우 이전에 가능한 값 목록이 지워집니다.

7. for (var i=0; ivar thisState = statesArray[i].nodeValue;
이제 상태 이름 목록을 반복하고 현재 표시된 상태 이름을 thisState에 저장합니다.
8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
사용자가 지금까지 입력한 내용이 상태 이름의 일부인지 확인하고 싶지만 이것만으로는 충분하지 않습니다. , 우리
또한 우리가 입력하는 내용이 주 이름의 시작 부분에 있는지 확인해야 합니다. 결국 Kansas를 입력하는 경우 드롭다운 상자에 Arkansas

또는 Kansas가 표시되는 것을 원하지 않을 것입니다. 또한 이 검사를 수행할 때 indexOf()를 검사하기 전에 두 문자열이 모두 소문자인지 확인하세요.

indexOf()가 0을 반환하면(즉, 입력 문자열이 thisState의 시작 부분에서 발견된 경우)
일치 항목이 발견된 것입니다.
9.

if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName("item");
for (var i=0; i<allStates.length; i++) {
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}

이 상태 이름은 가능한 값이므로 표시할 목록에 추가하려고 합니다. 구현 방법은 임시
p를 만들고 해당 innerHTML을 상태 이름으로 설정하고 onclick 핸들러와 className을 추가한 다음 전체 p
를 팝업 p에 추가하는 것입니다. 각 상태 이름을 별도의 p로 추가하면 JavaScript 및 CSS를 사용하여 각 상태 이름을 조작할 수 있습니다.
10. varfoundCt = document.getElementById("popups").childNodes.length;

모든 주 이름을 순회한 후 팝업 창을 만들어야 합니다. 그런데 우리가 얻은 주 이름은 몇 개입니까? 여기에서 이 값을 계산합니다:foundCt.

11. if (foundCt == 0) {
document.getElementById("searchField").className = "error";

}

foundCt가 0이면 사용자가 잘못된 내용을 입력했다는 의미입니다. 사용자에게 실수를 알릴 수 있도록 className을 error로 설정했습니다. 이 설정으로 인해 입력 필드의 배경이 연한 노란색이 됩니다(이는 스크립트 13-17의 CSS 스타일 규칙에 의해 제어됩니다).
12.

var tempp = document.createElement("p");
tempp.innerHTML = thisState;
tempp.onclick = makeChoice;
tempp.className = "suggestions";
document.getElementById("popups").appendChild(tempp);

foundCt가 1이면 고유한 일치 항목을 찾은 것이므로 필드에 주 이름을 입력할 수 있습니다. 사용자가 이미 ca를 입력한 경우 어떤 상태로 들어가고 싶은지 이미 알고 있으므로 lifornia를 입력할 필요가 없습니다.
팝업에서 입력 필드에 p만 입력하여 전체 상태 이름을 자동으로 제공한 다음 팝업 p를 지웁니다.
13.

if (foundCt == 1) {
document.getElementById("searchField").value = document.getElementById
➝("popups").firstChild.innerHTML;
document.getElementById("popups").innerHTML = "";
}

주 이름을 입력하는 또 다른 방법은 팝업 목록에서 주 이름을 클릭하는 것입니다. 이 경우 makeChoice() 이벤트 핸들러가 호출됩니다. 먼저 특정 p를 제공하는 이벤트 대상을 확인하여 사용자가 어떤 상태 이름을 클릭했는지 알아냅니다.
이 p의 innerHTML을 보면 상태 이름이 제공되며 입력 필드에 상태 이름을 입력합니다. 마지막으로 가능한 값의 팝업
목록을 지웁니다.

양식 필드를 자동으로 완성하는 Ajax 예제

관련 기사