Konular

jQuery ile Otomatik Tamamlayıcı

Uygulamada jQuery(Ajax), PHP ve MySQL kullanacağız.

jQuery ile Otomatik Tamamlayıcı

Yukardaki bir Tamamlayıcı için 3 farklı teknoloji gerekiyor, Javascript (JQuery), PHP ve MySQL

HTML ve Javascript Kısmı

 

<style type="text/css">

    .tavsiyeBox {
        position: relative;
        left: 30px;
        margin: 10px 0px 0px 0px;
        width: 300px;
        background-color: #212427;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000;
        color: #fff;
    }

    .tavsiye_listesi {
        margin: 0px;
        padding: 0px;
    }

    .tavsiye_listesi li {
        margin: 0px 0px 3px 0px;
        padding: 3px;
        border-bottom:1px solid #757575;
        cursor: pointer;
    }

    .tavsiye_listesi li:hover {
        background-color: #659CD8;
    }

</style>

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function lookup(aranacak_metin) {
        if(aranacak_metin.length == 0) {
            $('#tavsiye').hide();
        } else {
            $.post("php_kodu.php", {konu_basligi: ""+aranacak_metin+""}, function(data){
                if(data.length >0) {
                    $('#tavsiye').show();
                    $('#otomatik_tavsiye_listesi').html(data);
                }
            });
        }
    }

    function fill(thisValue) {
        $('#aranacak_metin').val(thisValue);
    }

    jQuery(function() {

        $('#aranacak_metin').click(function(){
            if($('#aranacak_metin').val().length>0){
                lookup(this.value);
                $('#tavsiye').show('slow');
            }

        });
        $('#aranacak_metin').keyup(function(){
            lookup(this.value);
            $('#tavsiye').show('slow');
        });
        $('#tavsiye').bind("mouseenter",function(){
            $('#tavsiye').show('slow');
        }).bind("mouseleave",function(){
            $('#tavsiye').hide('slow');
        });
    });
</script>


<input id="aranacak_metin" size="30" type="text" style="float:right; margin-right:20px;"/>


<div class="tavsiyeBox" id="tavsiye" style="display:none;">

    <img src="/tm/auto_complier/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    <ul class="tavsiye_listesi" id="otomatik_tavsiye_listesi"></ul>

</div>

 

Şimdi PHP ve MYSQL kısmını görelim:

 



$dbconnect = mysql_connect('localhost', 'root', '1');
$db= mysql_select_db('dijitalders', $dbconnect);

if (!$db) {
    echo 'HATA: Veri tabanina baglanilamadi';
} else {

    if (isset($_POST['konu_basligi'])) {

        $KonuBasligi = $_POST['konu_basligi'];

        if (strlen($KonuBasligi) > 0) {

            $Sorgu = mysql_query("SELECT baslik FROM icerik WHERE baslik LIKE '$KonuBasligi%' LIMIT 20");
            if ($Sorgu) {

                while ($Sonuc = mysql_fetch_object($Sorgu)) {
                    echo '
  • .
  • $Sonuc->baslik . '');">' . $Sonuc->baslik . '';
                    }

                } else {

                    echo 'HATA: SQL Sorgu metninde yanlislik var.';

                }
            }

        } else {

            echo 'Herhangi bir veriyi post etmeden sonuc dondurulmez.';

        }
    }
    ?>
     

 

Orjinal kodda tamamlama penceresi üzerinden ayrıldığınızda tamamlama penceresi kaybolmuyor ve başkaca mantık hatalarıda var. Ama yukardaki kodda bunlar düzeltilmiş.

 

Kaynak http://www.nodstrum.com/2007/09/19/autocompleter/

 

jQuery ile Otomatik Tamamlayıcı

Yorumunuzu Ekleyin
jQuery ile Otomatik Tamamlayıcı Yorumları +3 Yorum
  • Uğur
    1
    Uğur
    php_kodu.php dosyasının 24. satırında hata veriyor sorunu bulamadım şimdiden teşekkürler...
    27 Aralık 2011 16:44:32, Salı
  • Cihangir C.
    1
    Cihangir C.
    hata veren alanı şu şekilde düzelte bilirsiniz. teşekkürler güzel paylaşım while Sonuc mysql_fetch_objectSorgu echo '<li onclick"fill''.Sonuc->ad.'';">'. Sonuc->ad .'</li>';
    31 Ağustos 2013 16:34:25, Cumartesi
  • omer
    1
    omer
    bunu asp olarak nasıl uyarlarız
    21 Eylül 2014 13:46:34, Pazar

JQuerye Giriş

JQuery, Sihirli dolar ($)işağreti ve operasyonlar zinciridir. Aslında Javascript ve CSS bilginiz varsa çok hoşunuza gidebilir.

33,311 Okunma 3 Yorum 07/07/2011 18:40:09 18/02/2014 22:11:40

jQuery ve AJAX işlemleri

Bu yazıda jQuery kütüphanesi ile AJAX işlemlerinin nasıl yapıldığından bahsedeceğim. Prototype ve MooTools kütüphanelerini de kullanmış biri olarak size söyleyebilirim ki AJAX işlemlerinin en kolay ve esnek bir şekilde jQuery ile yapılabildiğini gördüm. Eminim ki yazının sonunda bu konuda bana hak vereceksiniz, çünkü gerçekten jQuery ile bir AJAX işlemi yapmak çok kolay..

28,154 Okunma Henüz yorum yapılmamış 31/10/2012 02:07:16 31/10/2012 02:07:04

Jquery ile Form İşlemleri

Jquerynin bize sağlıcağı en büyük kazanç şüpesiz farklı browserlar için tek kod kullanmak.

21,878 Okunma Henüz yorum yapılmamış 26/07/2011 12:12:10 17/10/2016 01:27:42

Jquery Kısa Teknikler

Jquery kullanırken yardımcı olacak bir kaç detay...

20,997 Okunma Henüz yorum yapılmamış 18/08/2018 13:33:35 11/04/2020 03:22:50

JQuery Olayları (Events)

Bir nesenin tetiklenmesini sağlayan olay çeşitleri

19,129 Okunma Henüz yorum yapılmamış 15/01/2014 20:55:49

JQuery Nedir?

Jquery, javascript ile hep yapmak isteyip, karışık JS programlama dili yüzünden bir türlü yapamadığınız kodlamayı çok kolay ve hızlıca yapmanızı sağlayan javascript kütüphanesidir.Diğer bir güzel yanı da jquery ile yazılan kodun tüm popüler tarayıcılarda sorunsuz çalışmasıdır, sizin kod üzerinde tarayıcı uyumluluğu çalışması yapamanıza gerek yoktur.

18,880 Okunma Henüz yorum yapılmamış 21/06/2011 23:58:55 08/11/2014 23:59:12

JQuery Özellik Şemaları

JQuery tüm özellikleriyle bu şemalarda saklı.

17,920 Okunma Henüz yorum yapılmamış 03/12/2012 02:27:58 03/12/2012 02:30:15

jQuery Ajax File Upload

PHP ile dosya yükleme işlemi yaparken kullanıcılara Upload durumunun hangi aşamada olduğunu yüzdesel olarak veya bir progres bar ile göstermek elbette daha güzel olur.

15,431 Okunma Henüz yorum yapılmamış 03/02/2015 16:45:48 12/06/2015 18:50:46

Yükleniyor...