jQuery Autocomplete Kullanımı

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

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

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.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 @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@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 CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_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..

Ekstralar

Bir cevap yazın Cevabı iptal et