Eskilerden Ajax Bul Uygulaması :)

Merhaba arkadaşlar uzun zaman öncesinden yazmış olduğum o zamanlar ne için yazdığımı tam bilmediğim bir uygulamayı sizlerle paylaşmak istiyorum . Uygulama aslında basit bir metin veriyorsunuz ve bu metin içerisinde istediğiniz sözcüğü arayıp renklendiriyor ama dahada geliştirilebilir ve yeni özellikler katılarak değişik uygulamalarda kullanılabilir diye düşünüyorum mesela her sitede en altta bunun gibi bul kutusu olsa arayınca istediğimiz sözçüğü çat diye bulsak güzel olurdu :) Gerçi ctrl+f bu istediğimiz işlemi görüyor ama şu zamanda ama birçok insana ctrl+f ne işe yarıyor desek bilmez onun için güzel olabilirdi neyse kodlar aşağıda sistemin çalışır halini görmek için ise linki tıklamanız yeterli olacak iyi kullanımlar ..

index.php

PHP:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ajax Bul Uygulaması ! - Umut ÇETİNKAYA</title>
  6. <style>
  7. #content{
  8. border:1px solid silver;
  9. height:100%;
  10. }
  11. #form{
  12. text-align:center;
  13. margin:5px;
  14. border:1px solid silver;
  15. padding:5px;
  16. background-color:#E8E8E8;
  17. padding:10px;
  18. }
  19. #veri_kutusu{
  20. border:1px solid silver;
  21. width:600px;
  22. height:100%;
  23. }
  24. #sonuc_veri{
  25. margin-top:5px;
  26. margin-bottom:5px;
  27. margin-left:5px;
  28. margin-right:5px;
  29. border:1px solid silver;
  30. height:250px;
  31. overflow:auto;
  32. padding:5px;
  33. }
  34. #bul_alan{
  35. text-align:center;
  36. margin-top:5px;
  37. margin-bottom:5px;
  38. margin-left:5px;
  39. margin-right:5px;
  40. border:1px solid silver;
  41. height:20px;
  42. background-color:#E8E8E8;
  43. padding:10px;
  44. }
  45. #bul{
  46. border:1px solid silver;   
  47. width:570px;
  48. height:20px;
  49.  
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <script>
  55. function veriyaz(){
  56. document.getElementById('sonuc_veri').innerHTML = document.getElementById('veri_kutusu').value;
  57. }
  58. </script>
  59. <iframe style="display:none;" name="gizli_iframe"></iframe>
  60. <form action="guncelle.php" name="bul_formu" id="bul_formu" target="gizli_iframe" method="post">
  61. <div id="content">
  62. <div id="bul_alan">
  63. <input name="bul" type="text" id="bul" value="Bulunacak Sözcük" onclick="this.value='';"/>
  64. &nbsp;<input type="submit" name="submit"  value="Bul" />
  65. </div>
  66. <div id="form">
  67. <textarea name="veri" id="veri_kutusu" rows="10" onblur="veriyaz()" onclick="this.value='';">İçinde Arama Yapılacak Metin</textarea>
  68. </div>
  69. <div id="sonuc_veri">
  70.  
  71. </div>
  72. </div>
  73. </form>
  74. </body>
  75. </html>

guncelle.php

PHP:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ajax Bul Uygulaması !</title>
  6. </head>
  7. <body>
  8. <div id="sonuc">
  9. <?
  10. $veri = $_POST['veri'];
  11. $bul = $_POST['bul'];
  12. $veri = str_replace($bul,"<span style=\"background:#FF8C8C;\">$bul</span>",$veri);
  13. ?>
  14. </div>
  15. <script> parent.document.getElementById('sonuc_veri').innerHTML = document.getElementById('sonuc').innerHTML </script>
  16. </body>
  17. </html>

Uygulamanın Çalışır Halini Görmek İçin Tıklayınız !

Leave a Reply

*
Gereksiz Yorumlari Engellemek icin bu uygulamaya 3 sn katlanmak zorundasiniz .
Buraya Tiklayin

Click to hear an audio file of the anti-spam word