Hoşgeldin, ziyaretçi [ Hesap Oluştur | Giriş YapRSS Feed  | 

jQuery Live Search Çalışması

| JQuery | Kasım 14, 2010

IPB ve bazı forum scriptlerinde kullanılan kullanıcı ekleme alanında anlık olarak kullanıcının var olup olmadığı kontrol edilerek kullanıcı bilgilendiriliyor.

Anlık veritabanı yoklamalarında sayfa yenilenmeden verilerin alınabilmesi için elbette Ajax kullanılıyor.

Bu örneğimizde jQuery Ajax Framework ile işin mantığını açıklamaya yetecek basit bir örnek hazırladım.

Çalışma mantığına gelirsek;
Input alanına girilen string alanın içeriğinin değişmesine duyarlı olarak veritabanında arama yapılıyor ve benzer içerikler MySQL select alanında belirtilen limti kadar Input alanı altında listelenir.

Liste de aranan içerik bulunur ve tıklanırsa Input alanına veri eklenir ve liste kapanır.

Örneğimizin ana kodu bu şekilde:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript">// < !&#91;CDATA&#91;
function showResult(str)
{
$.get("livesearch.php", { veri: str },
   function(data){
    $("div#livesearch").html(data);
   });
}

function tamamla(bulunan)
{
$("#inputbox").val(bulunan);
$("div#livesearch").html("");
}
// &#93;&#93;></script>

<form> Kullanıcı Ekle:

<input id="inputbox" onkeyup="showResult(this.value)" size="30" type="text" />

</form>

Response kodumuz livesearch.php içeriğimiz;

$veri=$_GET["veri"];
if($veri)
{
$baglan = mysql_connect("localhost", "root", "");
$db = mysql_select_db("test", $baglan);
$sql = "select * from users where user like '%$veri%' limit 5";

$sqlsonuc = mysql_query($sql, $baglan);
if(mysql_num_rows($sqlsonuc))
{
while($row = mysql_fetch_array($sqlsonuc))
{
echo "<input style="cursor: pointer;" onclick="tamamla(this.value)" type="text" value="&quot;.$row&#91;" />
";
}
}
}

Merak ettiğiniz konularda buradan veya buradan bana yazabilirsiniz.

Bu şekilde görünüyor:

Bu şekilde görünüyor

Share

Etiket Yok

Görüntülenmedi

  

One Response to “jQuery Live Search Çalışması”

Trackbacks/Pingbacks

  1. Anonim

Yorum Yaz

Yorum yazabilmek için giriş yapmalısınız