ホームページ > 記事 > ウェブフロントエンド > Ajax でフォームフィールドに自動的に入力する例

Ajax でフォームフィールドに自動的に入力する例

韦小宝オリジナル: 2017-12-31 10:24:531663ブラウズ

この記事では、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
c4e265c9a32295e9655067b4d7789b1f ;
this 注意すべきは 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の値を取得します。次に、このフィールドの class 属性をクリアします。

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) {
これまでにユーザーが入力した内容が州名の一部であるかどうかを確認したいのですが、これだけでは十分ではありません。
また、入力する内容が州名の先頭にあることを確認する必要もあります。結局のところ、「カンザス」と入力した場合、ドロップダウンボックスに「アーカンソー

」や「カンザス」と表示されるのは望ましくありません。また、このチェックを行うときは、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. var foundCt = document.getElementById("popups").childNodes.length;

すべての州名を調べた後、ポップアップウィンドウを作成する必要があります。しかし、州名はいくつ取得できたでしょうか?ここでは、この値を計算します:foundCt。

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

}

foundCt が 0 の場合、ユーザーが間違ったコンテンツを入力したことを意味します。この設定により、入力フィールドの背景が明るい黄色になります (これは、スクリプト 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.

りー

州名を入力する別の方法は、ポップアップリストで州名をクリックすることです。この場合、makeChoice() イベントハンドラーが呼び出されます。まず、特定の p を提供するイベントのターゲットをチェックすることで、ユーザーがどの州名をクリックしたかを調べます。
この p の innerHTML を表示すると州名が表示されます。州名を入力フィールドに入力します。最後に、ポップアップ
可能な値のリストをクリアします。

Ajax でフォームフィールドに自動的に入力する例

関連記事