Membuat Prediction Text atau Autocomplete atau Search Suggestion Fungsionalitas dengan PHP dan MySQL Ajax Dan Json.
Selamat Sore. Anda mungkin tahu bahwa sebagian besar situs website seharusnya memiliki "pencarian ramah." Jadi, apa sih itu pencarian yang bersahabat? Deskripsi modern tentang istilah ini adalah: fungsi untuk memprediksi kueri / query pengguna atau membantunya menyusun pertanyaan yang tepat. Solusi terbaik untuk membangun pencarian yang bersahabat adalah dengan fungsi pencarian pelengkapan otomatis atau pencarian.
Untuk menambahkan fitur ini ke situs Anda beberapa tahun yang lalu, Anda harus memiliki keahlian dengan beberapa teknologi: AJAX, CSS, PHP dan MySQL. Saat ini, kita dapat menggunakan pustaka seperti pustaka TypeBhead.js dari Twitter, sebuah plugin jQuery yang dirancang untuk menambahkan fungsi pelengkapan otomatis ke kotak pencarian.
Salah satu hal yang perlu diperhatikan tentang Typeahead.js, bagaimanapun, adalah bahwa ia tidak menyertakan sampel dengan database MySQL. Mari kita perbaiki dengan membuat autocomplete atau mencari saran dengan PHP dan MySQL.
Untuk menambahkan fitur ini ke situs Anda beberapa tahun yang lalu, Anda harus memiliki keahlian dengan beberapa teknologi: AJAX, CSS, PHP dan MySQL. Saat ini, kita dapat menggunakan pustaka seperti pustaka TypeBhead.js dari Twitter, sebuah plugin jQuery yang dirancang untuk menambahkan fungsi pelengkapan otomatis ke kotak pencarian.
Salah satu hal yang perlu diperhatikan tentang Typeahead.js, bagaimanapun, adalah bahwa ia tidak menyertakan sampel dengan database MySQL. Mari kita perbaiki dengan membuat autocomplete atau mencari saran dengan PHP dan MySQL.
Mari Kita Membuat index.htm file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>PHP MySQL Typeahead Autocomplete</title>
<meta charset="utf-8">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//netsh.pp.ua/upwork-demo/1/js/typeahead.js"></script>
<style>
h1 {
font-size: 20px;
color: #111;
}
.content {
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
.tt-hint,
.city {
border: 2px solid #CCCCCC;
border-radius: 8px 8px 8px 8px;
font-size: 24px;
height: 45px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 400px;
}
.tt-dropdown-menu {
width: 400px;
margin-top: 5px;
padding: 8px 12px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px 8px 8px 8px;
font-size: 18px;
color: #111;
background-color: #F1F1F1;
}
</style>
<script>
$(document).ready(function() {
$('input.city').typeahead({
name: 'city',
remote: 'city.php?query=%QUERY'
});
})
</script>
</head>
<body>
<div class="content">
<form>
<h1>Try it yourself</h1>
<input type="text" name="city" size="30" class="city" placeholder="Please Enter City or ZIP code">
</form>
</div>
</body>
</html>
Selanjutnya kita membuat mysql.php. Untuk Databasenya Buat Sendiri yak. hihihi
<?php
//CREDENTIALS FOR DB
define ('DBSERVER', 'localhost');
define ('DBUSER', 'user');
define ('DBPASS','password');
define ('DBNAME','dbname');
//LET'S INITIATE CONNECT TO DB
$connection = mysql_connect(DBSERVER, DBUSER, DBPASS) or die("Can't connect to server. Please check credentials and try again");
$result = mysql_select_db(DBNAME) or die("Can't select database. Please check DB name and try again");
//CREATE QUERY TO DB AND PUT RECEIVED DATA INTO ASSOCIATIVE ARRAY
if (isset($_REQUEST['query'])) {
$query = $_REQUEST['query'];
$sql = mysql_query ("SELECT zip, city FROM zips WHERE city LIKE '%{$query}%' OR zip LIKE '%{$query}%'");
$array = array();
while ($row = mysql_fetch_array($sql)) {
$array[] = array (
'label' => $row['city'].', '.$row['zip'],
'value' => $row['city'],
);
}
//RETURN JSON ARRAY
echo json_encode ($array);
}
?>
