Jquery ve PHP/MYSQL ile text etiketini otomatik olarak tamamlama
İlk önce aşağıdaki bağlantıları sayfanıza <body> etiketinin hemen üzerine ekleyin.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
CSS
<body> etiketinin hemen üzerine ekleyin.
<style>
input[type="text"]{
border-radius: 0px !important;
background-clip: padding-box !important;
color: #858585;
background-color: #FBFBFB;
border: 1px solid #D5D5D5;
font-family: inherit;
transition: box-shadow 0.45s ease 0s, border-color 0.45s ease-in-out 0s;
box-shadow: none;
}
.dropdown-menu {
min-width: 200px !important;
}
</style>
HTML
<body> etiketinin hemen altına ekleyin.
<div class="col-lg-6">
<div class="input-group input-group-lg">
<input class="form-control" type="text" id="sehirara">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Ara</button>
</span> </div>
<div class="input-group-btn" id="menuac">
<ul class="dropdown-menu" id="liyapistir">
</ul>
</div>
</div>
JQuery
</body> etiketinin hemen üzerine ekleyin.
<script>
(function($){
$(document).on("keyup", "#sehirara",function(){
var sehirara = $("#sehirara").val();
if (sehirara.length > 2){ // aranılan kelime 2 harften fazla olmallı
$.ajax({
type: "POST",
url: "ajax.php",
data: {
sehir: sehirara,
},
error: function (xhr, textStatus, errorThrown) {
alert('Hata: ' + xhr.responseText);
},
success: function (data) {
$("#menuac").addClass('open');
$("#liyapistir").html(data)
}
});
}
});
$(document).on("click", "#liyapistir li a",function(){
$("#sehirara").val($(this).html());
$("#menuac").removeClass('open');
});
$(document).on("click", "body",function(){
$("#menuac").removeClass('open');
});
})(jQuery);
</script>
PHP
ajax isminde bir php sayfası (ajax.php) oluşturun ve aşağıdaki PHP kodunu bu sayfanın içne kopyalayın. Varitabanına bağlantı kurmayı unutmayın.
<?PHP
$db_host = "localhost"; //Host address
$db_name = "veritabaniismi"; //veritabani ismi
$db_user = "veritabani kullanici ismi"; //veritabani kullanici ismi
$db_pass = "sifre"; //sifre
$mysqli = new mysqli($db_host, $db_user, $db_pass, $db_name);
$mysqli->query("SET NAMES utf8");
if(mysqli_connect_errno()) {
echo "Hata Oluştu: " . mysqli_connect_errno();
exit();
}
$sehir = $mysqli->real_escape_string($_POST['sehir']);
$sql="SELECT * FROM iller WHERE sehir LIKE'%".$sehir."%' ORDER BY sehir ASC LIMIT 15";
$result = $mysqli->query($sql);
$ret = '';
if ($result->num_rows){
while ($nt = $result->fetch_array()){
$ret .= '<li id="'.$nt['id'].'"><a href="#">'.$nt['sehir'].'</a></li>';
}
} else {
$ret .= '<li> Şehir Bulunamadı</li>';
}
echo $ret;
?>
Veritabanınızda iller tablosu oluşturun.
CREATE TABLE IF NOT EXISTS `iller` ( `id` int(11) NOT NULL, `sehir` varchar(50) DEFAULT NULL ) ENGINE=InnoDB AUTO_INCREMENT=82 DEFAULT CHARSET=utf8;
En son olarakda aşağıdaki illeri bu tablonun içine yerlştirin.
INSERT INTO `iller` (`id`, `sehir`) VALUES (1, 'ADANA'), (2, 'ADIYAMAN'), (3, 'AFYON'), (4, 'AĞRI'), (68, 'AKSARAY'), (5, 'AMASYA'), (6, 'ANKARA'), (7, 'ANTALYA'), (75, 'ARDAHAN'), (8, 'ARTVİN'), (9, 'AYDIN'), (10, 'BALIKESİR'), (74, 'BARTIN'), (72, 'BATMAN'), (69, 'BAYBURT'), (11, 'BİLECİK'), (12, 'BİNGÖL'), (13, 'BİTLİS'), (14, 'BOLU'), (15, 'BURDUR'), (16, 'BURSA'), (17, 'ÇANAKKALE'), (18, 'ÇANKIRI'), (19, 'ÇORUM'), (20, 'DENİZLİ'), (21, 'DİYARBAKIR'), (81, 'DÜZCE'), (22, 'EDİRNE'), (23, 'ELAZIĞ'), (24, 'ERZİNCAN'), (25, 'ERZURUM'), (26, 'ESKİŞEHİR'), (27, 'GAZİANTEP'), (28, 'GİRESUN'), (29, 'GÜMÜŞHANE'), (30, 'HAKKARİ'), (31, 'HATAY'), (33, 'İÇEL'), (76, 'IĞDIR'), (32, 'ISPARTA'), (34, 'İSTANBUL'), (35, 'İZMİR'), (46, 'KAHRAMANMARAŞ'), (78, 'KARABÜK'), (70, 'KARAMAN'), (36, 'KARS'), (37, 'KASTAMONU'), (38, 'KAYSERİ'), (79, 'KİLİS'), (71, 'KIRIKKALE'), (39, 'KIRKLARELİ'), (40, 'KIRŞEHİR'), (41, 'KOCAELİ'), (42, 'KONYA'), (43, 'KÜTAHYA'), (44, 'MALATYA'), (45, 'MANİSA'), (47, 'MARDİN'), (48, 'MUĞLA'), (49, 'MUŞ'), (50, 'NEVŞEHİR'), (51, 'NİĞDE'), (52, 'ORDU'), (80, 'OSMANİYE'), (53, 'RİZE'), (54, 'SAKARYA'), (55, 'SAMSUN'), (63, 'ŞANLIURFA'), (56, 'SİİRT'), (57, 'SİNOP'), (73, 'ŞIRNAK'), (58, 'SİVAS'), (59, 'TEKİRDAĞ'), (60, 'TOKAT'), (61, 'TRABZON'), (62, 'TUNCELİ'), (64, 'UŞAK'), (65, 'VAN'), (77, 'YALOVA'), (66, 'YOZGAT'), (67, 'ZONGULDAK');
