Dalam tutorial ini kita akan menerapkan jQuery pencarian autocomplete menggunakan PHP, MySQL dan Ajax. autocomplete jQuery ini memberikan saran ketika pengguna mulai mengetik di telusur seperti di kotak pencarian google. Saya telah menerapkan dua jenis jQuery autocomplete .
1. Simple autocomplete jQuery
2. Mengisi beberapa textbox dengan permintaan autocomplete tunggal jQuery.
silakan lihat tutorial terbaru saya di jQuery automplete
jQuery Autocomplete Mutiple Fields Menggunakan jQuery, Ajax, PHP dan MySQL
Sistem Faktur Menggunakan jQuery AutoComplete
Untuk setiap surat jenis pengguna sesuatu di textbox, permintaan ajax akan dikirim ke server Apache. Ada server Apache akan commuincate dengan database MySQL dan mengambil beberapa data ini berdasarkan pada pengguna teks yang diketik dalam kotak teks. Akhirnya Apache server mengirimkan respon terhadap permintaan ajax dikirim oleh klien, data respon akan menunjukkan sebagai saran kepada pengguna.
Berikut ini Adalah langkah membuat auto complete .
Langkah 1:
Buat berikut sampel database dan tabel untuk melaksanakan ini fungsi autocomplete jQuery menggunakan berikut query sql.
functionality using following sql queries.
CREATE DATABASE IF NOT EXISTS `autocomplete` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `autocomplete`;
CREATE TABLE IF NOT EXISTS `country` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`iso` char(2) NOT NULL,
`name` varchar(80) NOT NULL,
`nicename` varchar(80) NOT NULL,
`iso3` char(3) DEFAULT NULL,
`numcode` smallint(6) DEFAULT NULL,
`phonecode` int(5) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=240 ;
CREATE TABLE IF NOT EXISTS `names` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`fruit` varchar(100) NOT NULL,
`human` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=166 ;
Saya Sarankan Download Source Code nya untuk Mengetahui lebih jelas.
Langkah 2:
Membuat file config.php untuk memiliki koneksi database dalam file terpisah.
<?php
define('DB_HOST', 'localhost');
define('DB_NAME', 'autocomplete');
define('DB_USER','root');
define('DB_PASSWORD','');
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
?>
Langkah 3:
Sekarang membuat file index.php dan menciptakan berikut textbox.
<input id="country_name" class="form-control txt-auto"/>
Langkah 4:
Jika Anda ingin menerapkan autocomplete ini fungsi minimum Anda perlu mengikuti jquery dan css file.
(Jquery.min.js, jquery.ui.min.js dan jquery.ui.min.css). menambahkan file berikut dalam file index.php Anda.
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
Langkah 5:
Berikut ini script jquery akan mendapatkan jenis apa pun pengguna dalam kotak teks, dan membuat permintaan ajax ke server dengan data, pengguna dimasukkan dalam textbox. Akhirnya mendapatkan respon dari server dan menunjukkan sebagai saran
$('#country_name').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'country'
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item,
value: item
}
}));
}
});
},
autoFocus: true,
minLength: 0
});
Langkah 6:
membuat file ajax.php yang akan menangani semua permintaan ajax dari klien.
<?php
require_once 'config.php';
if($_GET['type'] == 'country'){
$result = mysql_query("SELECT name FROM country where name LIKE '".strtoupper($_GET['name_startsWith'])."%'");
$data = array();
while ($row = mysql_fetch_array($result)) {
array_push($data, $row['name']);
}
echo json_encode($data);
}
?>
Silahkan download source code (menambahkan semua contoh kode menunjukkan di halaman demo) dari tutorial ini menggunakan atas link download .
Download Gan
Demikian Yang bisa saya bagikan selanjutnya terima kasih atas kunjunganya sekian tutor kali ini terimakasih.
