با عرض سلام و ادب خدمت کاربران محترم سایت پی وی لرن.
در این جلسه قصد داریم تا به آموزش ساخت Live Search (جستجوی زنده) با Ajax بپردازیم.
با استفاده از Ajax می توانیم جستجو های کاربر پسندانه تر و تعاملی تر بسازیم.
در ادامه برنامه ای خواهیم نوشت تا نتایج جستجو را هنگام تایپ کردن به کاربر نشان دهد.
جستجوی زنده در مقایسه با جستجوی سنتی مزایایی دارد از جمله:
نتایجی که ما در برنامه از آن ها استفاده خواهیم کرد در فایل links.xml ذخیره شده اند:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?xml version="1.0" encoding="UTF-8"?> <pages> <link> <title>HTML a tag</title> <url>https://www.pvlearn.com/tags/tag_a.asp</url> </link> <link> <title>HTML br tag</title> <url>https://www.pvlearn.com/tags/tag_br.asp</url> </link> <link> <title>CSS background Property</title> <url>https://www.pvlearn.com/cssref/css3_pr_background.asp</url> </link> <link> <title>CSS border Property</title> <url>https://www.pvlearn.com/cssref/pr_border.asp</url> </link> <link> <title>JavaScript Date Object</title> <url>https://www.pvlearn.com/jsref/jsref_obj_date.asp</url> </link> <link> <title>JavaScript Array Object</title> <url>https://www.pvlearn.com/jsref/jsref_obj_array.asp</url> </link> </pages> |
هنگامی که کاربر متنی را در فیلد ورودی تایپ می کند، تابع ()showResult اجرا می شود.
این تابع توسط رویداد onkeyup اجرا می شود:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <html> <head> <script> function showResult(str) { if (str.length==0) { document.getElementById("livesearch").innerHTML=""; document.getElementById("livesearch").style.border="0px"; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (this.readyState==4 && this.status==200) { document.getElementById("livesearch").innerHTML=this.responseText; document.getElementById("livesearch").style.border="1px solid #A5ACB2"; } } xmlhttp.open("GET","livesearch.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <input type="text" size="30" onkeyup="showResult(this.value)"> <div id="livesearch"></div> </form> </body> </html> |
توضیحات کد:
اگر فیلد ورودی خالی باشد (str.length == 0)، تابع محتویات livesearch را پاک می کند و از تابع خارج می شود.
اگر فیلد خالی نباشد، تابع کار های زیر را انجام می دهد:
فایلی که توسط جاوااسکریپت فراخوانده می شود، livesearch.php نام دارد.
کد این فایل یک فایل xml را برای تطابق دادن رشته جستجو و بازگرداندن نتایج، جستجو می کند:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <?php $xmlDoc=new DOMDocument(); $xmlDoc->load("links.xml"); $x=$xmlDoc->getElementsByTagName('link'); //get the q parameter from URL $q=$_GET["q"]; //lookup all links from the xml file if length of q>0 if (strlen($q)>0) { $hint=""; for($i=0; $i<($x->length); $i++) { $y=$x->item($i)->getElementsByTagName('title'); $z=$x->item($i)->getElementsByTagName('url'); if ($y->item(0)->nodeType==1) { //find a link matching the search text if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) { if ($hint=="") { $hint="<a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } else { $hint=$hint . "<br /><a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } } } } } // Set output to "no suggestion" if no hint was found // or to the correct values if ($hint=="") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?> |
اگر شرط (strlen(q$) > 0) برقرار باشد، کار های زیر انجام می شود:
جلسه ساخت Live Search با Ajax نیز به اتمام رسید.
در جلسه بعد به ساخت خوراک خبری با استفاده ار Ajax خواهیم پرداخت. با ما همراه باشید.