شرح صفوف ومحتوى الفقرة
في المثال السابق عندما يقوم المستخدم بكتابة احرف في حقل الادخال سوف يتم تنفيذ الدالة ( )showHint وذلك باستخدام ال event التالي "onkeyup"
Example
HTML
<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xmlhttp.open("GET", "/files/gethint.php?q=" + str);
xmlhttp.send();
}
}
</script>
شرح الكود السابق
اولا قمنا بالتحقق من اذا كان حقل الادخال فارغا او لا باستخدام ( str.length==0 )
- فأذا كان فارغا يتم الخروج من تنفيذ الدالة
- واذا لم يكن فارغا تنفيذ ما يلي
- يتم انشاء العنصر "XMLHttpRequest"
- يتم انشاء الدالة عندما تكون استجابة الخادم جاهزة
- يتم ارسال طلب الي الخادم لأحضار ملف "gethint.php"
- يحمل المتغير "str" القيمة التي قام بأدخالها المستخدم في حقل الادخال