البحث في قاعدة البيانات بدون تحديث الصفحة

الاثنين، 9 مايو 2016

البحث في قاعدة البيانات بدون تحديث الصفحة

بسم الله الرحمن الرحيم
كثير منا يرى في المواقع العالمية والمواقع الكبيرة انه عند ادخال البيانات في حقل البحث يتم البحث بدون تحديث الصفحة باستخدام اما تقنية jquery او ajax اليوم ساقوم بشرح كيفية ذلك طبعا كثيرا نجد عدة مواقع تقوم بشرح ذلك على طريقتها الخاصة وكل يشرح حسب فهمه للموضوع
الموضوع سهل جدا وغير معقد ولكن يحتاج الى فهم وتركيز عالي

طبعا سنستخدم تقنية ajax في ذلك

<code>
<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 (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("livesearch").innerHTML=xmlhttp.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>
</code>

<code>
<?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;
?>

</code>