jQuery:Ajax: AutoComplete Uygulaması

jQuery Autocomplete Türkçesi otomatik tanımlama ve/ya tamamlama olan bu uygulama web 2.0 furyasından sonra Ajax teknolojisi ile beraber kullanılabilirlik ve erişilebilirlik açısından büyük bir yenilik getirdi.

Kullanıcılara projeniz içinde daha hızlı ve verimli arama yapabilmelerine imkan tanımak için uygun bir autocomplete uygulaması kullanmanız gerekir. Kullanıcıların, sayfaları tek tek gezmeden, aradığını bulduktan sonra detaylarını inceleyebildiği için, hem proje sahiplerine trafik açısından , hem de ziyaretçileriniz için zaman kaybını önlediği için çok faydalı bir uygulamadır.

 

 

Demo         Download

Fazla uzatmadan kodları paylaşalım;

Uygulamanın dosya yapısı

  • index.html
  • mysql.php
  • search.php
  • jquery.autocomplete.js
  • jquery.autocomplete.css

Uygulamanın arayüzü için basit bi html sayfa bile yeterli;

index.html


<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
$(function() {
$("#act").autocomplete('search.php?output=json', {
remoteDataType: 'json',
maxItemsToShow: 10,
autoFill: true,
onItemSelect: function(item) {
document.location.href='http://www.serpito.com/'+item.value;
}
});
});
</script>
<input type="text" id="act" placeholder="Aradığınız konu, başlık..." />

index.html görüldüğü gibi, sadece html input elementi ve jquery.autocomplete için gerekli css ve js import kodlarından ibaret.

 

jQuery Autocomplete pluginin orjinali için GitHub

mysql.php dosyası serpito.com’un herzaman kullandığı database class, bu yüzden paylaşmıyorum.

 

search.php


<?php
ob_start();
session_start();
error_reporting(E_ALL);
include_once 'mysql.php';
$results = array();
if (isset($_GET&#91;'q'&#93;)) {
$q = mysql_real_escape_string($_GET&#91;'q'&#93;);
$q_fix=str_replace(" ","%",$q);
if ($q_fix) {
$dd=$db->q("SELECT `post_title`, `post_name` FROM `wp_posts` WHERE `post_title` LIKE '%$q_fix%' and `post_type`='post' and `post_status`='publish' ORDER BY `ID` DESC LIMIT 0,10");
if($db->numrows($dd)>0){
while($data=$db->fassoc($dd)){
$key=$data['post_name'];
$value=$data['post_title'];
$results[] = array($key, $value);
}
}
}
}
$output = 'json';
if (isset($_GET['output'])) {
$output = strtolower($_GET['output']);
}
if ($output == 'json') {

header('Content-Type: application/json; charset=utf8');
echo json_encode($results);
}
$db->close();
?>

 

jquery.autocomplete.css ve jquery.autocomplete.js dosyalarını da uygulamanın kaynak kodlarında bulabilirsiniz.

Demo         Download

8 thoughts on “jQuery:Ajax: AutoComplete Uygulaması

  • Merhabalar örnek için çok teşekkürler. Bir şey sormak istiyorum ben sitemdeki ilanları listeletmek ve tıklayınca ilana gitmesini istiyorum. Aramayı yaptım başlıklarda aramayı yaptırdım, fakat bağlantım siteadi.com/seo_baglanti-id şeklinde fakat item.value ile ya seo_baglanti aldırıyorum ya id bu seferde ilanı göstertemiyorum. ilginize teşekkürler.

  • @Erkan , search.php deki arama sonuçlarını jsona aktaran bölümde , post_name değerini Id olarak db den çağırıp atayabilirsin.

    Yönlendirmek için de index.html deki autocomplete config kodlarını güncellemen lazım. onItemSelect metodu içindeki işlemi kendine uyarlayabilirsin.

  • Sn. Atilla Akoğlu ilginize çok teşekkürler. söylediklerinizi deniyorum hemen. umarım becerebilirim.nn1

  • Merhaba;

    Kendi projeme bu kodları uyarlayamadım. database adını, şifresini, kullanıcı adını değiştirdim ama olmadı. index.html sayfasını çalıştırıyorum aranacak kelimeyi yazıyorum herhangi bir sonuç alamıyorum autocomplete açılmıyor. select kısmını şu şekilde ayarladım

    if (isset($_GET[‘q’])) {
    $q = mysql_real_escape_string($_GET[‘q’]);
    $q_fix=str_replace(” “,”%”,$q);
    if ($q_fix) {
    $dd=mysql_query(“SELECT * FROM urunler WHERE UrunAdi LIKE ‘%$q_fix%’ “);

    $value=$dd[‘UrunAdi’];
    $results= $value;

    }
    }

    Yardımlarınızı rica ederim.

  • Bir projemde denedim. Arama sonuçları normal çıkıyor. onItemSelect ile yönlendirmeyi iptal ettim. buraya kadar herşey normal. kullanıcı arama kutusunu boş bırakıp butonu tıklarsa diye ajax form kontrolu yaptırdım. kontrol sonrası aynı içeriği ajaxla geri yüklüyorum. bu sefer ana sayfada normal olarak çalışan tamamlama çalışmıyor.

    Nedeni nedir bilen birisi yazabilir mi?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir