この記事では、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'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州を入力してください:
;
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
5. var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";フィールドへの入力を開始すると、searchSuggest()イベント処理が実行されるコードプログラム内で。まずは今まで入力した情報である
searchFieldの値を取得します。次に、このフィールドの class 属性をクリアします。
6. if (str != "") {
document.getElementById("popups").innerHTML = "";
7. for (var i=0; i
次に、状態名のリストを反復処理し、現在表示されている状態名を thisState に保存します。
8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
これまでにユーザーが入力した内容が州名の一部であるかどうかを確認したいのですが、これだけでは十分ではありません。
また、入力する内容が州名の先頭にあることを確認する必要もあります。結局のところ、「カンザス」と入力した場合、ドロップダウン ボックスに「アーカンソー
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; } }
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);
州名を入力する別の方法は、ポップアップ リストで州名をクリックすることです。この場合、makeChoice() イベント ハンドラーが呼び出されます。まず、特定の p を提供するイベントのターゲットをチェックすることで、ユーザーがどの州名をクリックしたかを調べます。
この p の innerHTML を表示すると州名が表示されます。州名を入力フィールドに入力します。最後に、ポップアップ
可能な値のリストをクリアします。
関連する推奨事項:
画像プレビューを実装し、サムネイルをアップロードして生成するための AJAX メソッド
jquery と iframe による Ajax アップロード効果の共有例
Ajax によるサーバーへの配列パラメーター値の転送の詳細な例
以上がAjax でフォームフィールドに自動的に入力する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。