.:: Ajax Pencarian Artikel ::.

Langkah langkah untuk membuat script pencarian menggunakan teknologi ajax adalah sebagai berikut:

1.) Siapkan database untuk menampung artikel kita, atau jika anda menggunakan CMS maka nama field - fieldnya bisa disesuaikan (ket: anda tidak perlu merubah database yang sudah ada, tetapi sesuaikan saja script yang ada disini dengan field yang ada pada database)

secara general sebuah database artikel biasanya berisi field2 sbb:
a. Username (berisi nama user pengirim artikel)
b. Subject (Berisi tentang judul artikel)
c. Content (Berisi tentang isi dari artikel)
d. Date (Berisi tentang tanggal pengiriman)
dst (optional)

dalam contoh kali ini saya menggunakan database dengan tabel yang saya beri nama 'article',

2.) Buatlah engine ajax, simpan dengan nama 'ajax.js', sebagai berikut:

1.  
2. var xmlhttp=false;
3. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
4.         try {
5.                  xmlhttp = new XMLHttpRequest();
6.         } catch (e) {
7.                  xmlhttp=false;
8.         }
9. }
10. if (!xmlhttp){
11.  try {
12.   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
13.  } catch (e) {
14.   try {
15.    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
16.   } catch (E) {
17.    xmlhttp = false;
18.   }
19.  }
20. }
21.  
22. if (!xmlhttp && window.createRequest) {
23.         try {
24.                 xmlhttp = window.createRequest();
25.         } catch (e) {
26.                 xmlhttp=false;
27.         }
28. }
29.  
30. var please_wait = "<center>Please Wait.....<br></center>";
31.  
32. function open_url(url, targetId, syarat) {
33.   if(!xmlhttp)return false;
34.     content = document.getElementById(syarat).value;
35.     var e=document.getElementById(targetId);if(!e)return false;
36.     if(please_wait)e.innerHTML = please_wait;
37.     xmlhttp.open("GET", url + escape(content), true);
38.     xmlhttp.onreadystatechange = function() { response(url, e); }
39.     try{
40.       xmlhttp.send(null);
41.     }catch(l){
42.     while(e.firstChild)e.removeChild(e.firstChild);
43.     e.appendChild(document.createTextNode("request failed"));
44.   }
45. }
46.  
47. function response(url, e) {
48.   if(xmlhttp.readyState != 4)return;
49.     var tmp= (xmlhttp.status == 200 || xmlhttp.status == 0) ? xmlhttp.responseText : "Link error, Hubungi admin dengan menyertakan error code: " + xmlhttp.status+" "+xmlhttp.statusText;
50.     var d=document.createElement("div");
51.     d.innerHTML=tmp;
52.     setTimeout(function(){
53.       while(e.firstChild)e.removeChild(e.firstChild);
54.       e.appendChild(d);
55.     },10)
56. }
57.  

1.  
2. <?
3. if ($_GET[cmd]=='cari'){
4. function trimlink($text, $length) {
5. if (strlen($text) > $length) $text = substr($text, 0, ($length-3))."...";
6. $text = str_replace($dec, $enc, $text);
7. return $text;
8. }
9. $connection = mysql_connect("localhost","root","");
10. mysql_select_db("article",$connection);
11. $cari=$_GET[cari];
12. $query = mysql_query("select * from article where content like '%$cari%'",$connection);
13. $jumlah = mysql_num_rows($query);
14. if($jumlah>0){
15. echo "Ditemukan : <b> $jumlah </b>Entry, untuk keyword <b>[ $cari ] </b>";
16. }else{
17. echo "Tidak ditemukan content yang sesuai dengan keyword <b>[ $cari ]</b>";
18. }
19. while($baris = mysql_fetch_array($query))
20. {
21. $baris[content] = str_replace($cari, "<font color='red'><b>".$cari."</b></font>", $baris[content]);
22. echo "<br><table>";
23. echo "<tr><td><b>Pengirim : $baris[username]</b></td></tr>";
24. echo "<tr><td><strong>Judul: $baris[subject] </strong></td></tr>";
25. echo "<tr><td>".trimlink($baris[content],200)."<br>
26. <a href='index.php?section=berita&view=more&id=$baris[id]'>(...Selengkapnya...)</a></td></tr>";
27. echo "<tr><td align='right' ><small>Dikirim Tanggal : $baris[date]</small></td></tr></table></br>";
28. }
29. } else {
30. echo "<script language=\"JavaScript\" src=\"ajax.js\"></script>";
31. echo "<form method='post' action='cari.php'>Masukkan keyword :
32.         <input type='text' name='cari' onkeyup=\"open_url('cari.php?cmd=cari&cari=','search-output','inputan');\" id='inputan'>
33.         </form></br>";
34. echo "<div id='search-output'></div>";         
35. }
36.  
37. ?>
38.