در مثال بالا، وقتی کاربر یک کاراکتر را در فیلد ورودی تایپ می کند، یک تابع
به نام "showHint()" اجرا می شود.
این تابع توسط رویداد onkeyup فعال می‌شود.
این کد HTML است:
مثال
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
توضیح کد:
ابتدا، بررسی کنید که آیا فیلد ورودی خالی است (str.length == 0). اگر هست، آن را پاک کنید
محتوای نگهدارنده txtHint و از تابع خارج شوید.
اما، اگر قسمت ورودی خالی نیست، موارد زیر را انجام دهید:
- یک شی XMLHttpRequest ایجاد کنید
- عملکردی را ایجاد کنید که وقتی پاسخ سرور آماده شد اجرا شود
- درخواست را به یک فایل PHP (gethint.php) در سرور ارسال کنید
- توجه کنید که پارامتر q به url اضافه شده است (gethint.php?q="+str)
- و متغیر str محتوای فیلد ورودی را نگه می دارد