Serpito

jQuery:Ajax: AutoComplete Uygulaması

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