jQuery Autocomplete Kullanımı

Merhaba arkadaşlar, bu videoda sizlere jquery autocomplete (otomatik tamamlama) eklentisinin kullanımını gösterdim.


Demo

http://erbilen.net/demo/jquery-autocomplete/

Video içinde bazı linklere giriş yaptım, bunları aşağıda sizlere vereyim hemen;

jQuery CDN Servisi: https://code.jquery.com/
jQuery UI Autocomplete Demo: https://jqueryui.com/autocomplete/
jQuery UI Autocomplete Api Sayfası: http://api.jqueryui.com/autocomplete/

Video içinde hazırladığım kodların örnekleri aşağıdadır;

api.php

<?php

try {
    $db = new PDO('mysql:host=localhost;dbname=demo;charset=utf8', 'root', '');
} catch (PDOException $e ){
    die($e->getMessage());
}

$term = $_GET['term'];

$query = $db->query('SELECT * FROM uye
WHERE uye_adi LIKE "%' . $term . '%"', PDO::FETCH_ASSOC);

if ( $query->rowCount() ){

    $data = array();

    foreach ( $query as $row ){
        $data[] = array(
            'value' => $row['uye_adi'],
            'uye_id' => $row['uye_id'],
            'uye_adi' => $row['uye_adi'],
            'uye_eposta' => $row['uye_eposta'],
            'uye_avatar' => $row['uye_avatar']
        );
    }

    echo json_encode($data);

}

index.html

<!doctype html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"/>
    <script>
        $(function(){

            var $search = $('#search');

            $search.autocomplete({
                source: 'api.php',
                focus: function(event, ui){
                    $search.val(ui.item.uye_eposta);
                },
                select: function(event, ui){
//                    window.location.href = 'https://www.google.com/#q=' + ui.item.uye_adi;
                    $search.val(ui.item.uye_eposta);
                }
            });

            $search.data('ui-autocomplete')._renderItem = function( ul, item ){

                var $li = $('<li>');

                $li.html('<a href="#">' +
                        '<img src="' + item.uye_avatar + '" />' +
                        '<span class="username">' + item.uye_adi + '</span>' +
                        '<span class="email">' + item.uye_eposta + '</span>' +
                        '</a>');

                return $li.appendTo(ul);

            };

        });
    </script>

    <style>
        #search {
            width: 500px;
        }
        .ui-autocomplete li a {
            overflow: hidden;
            display: block;
        }
        .ui-autocomplete li a img {
            float: left;
            margin-right: 10px;
            height: 40px;
        }
        .ui-autocomplete li a .username {
            display: block;
            font-size: 16px;
            line-height: 17px;
        }
        .ui-autocomplete li a .email {
            display: block;
            font-size: 12px;
            color: #999;
        }
    </style>

</head>
<body>

<input id="search" type="text"/>

</body>
</html>

mysql: demo

-- phpMyAdmin SQL Dump
-- version 4.1.12
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: May 01, 2015 at 11:43 PM
-- Server version: 5.6.16
-- PHP Version: 5.5.11

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @[email protected]@CHARACTER_SET_CLIENT */;
/*!40101 SET @[email protected]@CHARACTER_SET_RESULTS */;
/*!40101 SET @[email protected]@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `demo`
--

-- --------------------------------------------------------

--
-- Table structure for table `uye`
--

CREATE TABLE IF NOT EXISTS `uye` (
  `uye_id` int(11) NOT NULL AUTO_INCREMENT,
  `uye_adi` varchar(255) NOT NULL,
  `uye_eposta` varchar(255) NOT NULL,
  `uye_avatar` varchar(255) NOT NULL,
  PRIMARY KEY (`uye_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

--
-- Dumping data for table `uye`
--

INSERT INTO `uye` (`uye_id`, `uye_adi`, `uye_eposta`, `uye_avatar`) VALUES
(1, 'Tayfun Erbilen', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpt1/v/t1.0-1/p40x40/11150571_931151590276660_1648829158305262977_n.jpg?oh=4069d5e773b3d14b97ad52573aec18d6&oe=55E30655&__gda__=1440015885_52a5a0b45451bc87bad8e780c41e8f35'),
(2, 'Mert Osman Başol', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/p50x50/1964950_10206688116828423_6583006539395380068_n.jpg?oh=a7364b334a368f825451c814b7677eda&oe=55D607BF&__gda__=1439900624_dfaef636f9ea1c6076c155eb71781c8d'),
(3, 'Murat Miregil', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpa1/v/t1.0-1/p50x50/11052443_10205415379451129_1842162222714031022_n.jpg?oh=e7c98bc33a241cb00a27f032e3314cbd&oe=55D5BFCE&__gda__=1439485299_413a895407dfa5889a18c2bed7e3c683'),
(4, 'Batuhan Aydın', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/p50x50/10898165_641650965964699_1189819791888549590_n.jpg?oh=d4101d34b89c0bafd5f138fe41eb2329&oe=55D32566&__gda__=1440316752_ab45034618b777f1202a446b41e51e70'),
(5, 'Tolga Çatalahmetoğlu', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/c0.1.50.50/p50x50/10154428_10202845905101633_105216030809094613_n.jpg?oh=6cd6cc5970d17f5070b1edc51117ef17&oe=55A20088&__gda__=1440413345_f47c2827f982db88ecd76c3849067949');

/*!40101 SET [email protected]_CHARACTER_SET_CLIENT */;
/*!40101 SET [email protected]_CHARACTER_SET_RESULTS */;
/*!40101 SET [email protected]_COLLATION_CONNECTION */;

Ekstralar

input’a bir şeyler yazıp json servisinden verileri alırken geçen sürede bir loader eklemek isterseniz .ui-autocomplete-loading classını kullanacaksınız css’de.
yani;

.ui-autocomplete-loading {
	background: #fff url(ajax-loader.gif) no-repeat 97%;
}

gibi..

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“jQuery Autocomplete Kullanımı” üzerine 16 yorum

  1. Harika olmuş 🙂 kim bilir kaç kişi böyle bişe arıyordur bende dahil buna 🙂 hayır sever kodculardan allah razı olsun 🙂

  2. Ellerine sağlık abi gerçekten çok güzel bir ders olmuş 🙂 Ben de bu aralar bir sözlük scripti yazmak eğitim seti çekiyorum orda da kullanıcam inşaAllah, 11 Mayısta çekmeyi düşünüyorum 4.ders geldiği zaman sana teşekkür edicem videomda unutmazsam 🙂 sitemi ziyaret edip seti azıcık incelersen çok mutlu olurum 🙂 Teşekkür ederim, başarılarının devamını dilerim 🙂 http://www.zahidefe.com sitem 🙂

  3. Merhaba Tayfun bende kendi bloğumda arama kısmında makale başlıklarını otomatik tamamla yapmaya çalıştım fakat becerememiştim senin sayende yapabilecem inşallah 🙂 Bu yararlı bilgileri bizimle paylaştığın için teşekkür ediyorum 🙂

  4. @Orhun, gizleyemezsiniz. Browser üzerinde gerçekleşen her şey gözükür, takip edilebilir. O yüzden gizlemek yerine güvenli hale getirmek en iyisi olacaktır 🙂

  5. Ağabey gerçekten harika bir ders olmuş. Bununla çok iyi adres defteri yapılabilir. Hatta Halka açık bir adres defteri sitesi bile oluşturabilirim. 🙂

  6. Ellerine sağlık Tayfun. Çoğu arkadaşımızın işine yarayabilecek bi konu ve çok başarılı bir şekilde anlatmışsın 🙂

  7. Türkçe karakterlerde sorun çıkarıyor bunun çözümü hakkında ne önerirsin. Herkezin dediği gibi UTF-8 v.s. bahsetmezsin umarım farklı bir çözüm önerisi varsa duymak bilmek isteriz.

  8. @alper, herkes haklı ne yazık ki 🙂 Veritabanın ve tabloların utf8_general_ci ise, php dosyaların UTF-8 ise, veritabanına bağlanırken UTF-8 ayarını yaptıysan ve html kodlarında Charset metasını UTF-8 olarak belirlediysen türkçe karakter hatası alman mümkün değil.

  9. Öncelik konunuz için teşekkür ederim lakin anlamadığım bir nokta var jquery ile kullandığımız kısımda

    var $search = $(‘#search’);

    bu tarz bir tanımla yapıldı fakat api.php dosyasında ise

    $term = $_GET[‘term’];

    bu şekilde bir kullanım oldu get ile gelen term nerden geliyor term nasıl belirliyoruz başka isim belirleyemiyor muyuz acaba ?

    1. jQuery Autocomplete kendisi standart olarak term ismini belirlemiş. Eğer değiştirmek isterseniz source parametresini şöyle düzenleyebilirsiniz;

      source: function(request, response) {
              $.get('api.php', { 'kelime' : request.term }, function(data) {
                  response(data);
              });
      }

Bir Cevap Yazın

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