Membuat Fungsi Search Dengan Ajax Javascript

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Fungsi Search Dengan Ajax Javascript. Dimana Pada Kasus ini saya masih berkaitan dengan artikel saya sebelumnya tentang cara Membuat Live Edit Menggunakan Ajax Javascript Part1Â . Kenapa masih berkaitan? karena disini saya sudah menampilkan data dari database yang dimana saya akan menambahkan beberapa struktur html, dan beberapa function serta file php untuk membuat fungsi search dengan ajax javascript.

untukÂ Membuat Fungsi Search Dengan Ajax Javascript saya akan menambahkan div yang didalamnya ada input text untuk melakukan pencarian data saya letakkan diatas table yang pembahasan sebelumnya sudah di buat. Dan berikut ini scriptnya.

<div class="form-group">
  <input type="text" placeholder="Pencarian Posts" class="form-control form-control-sm" id="keyword">
</div>

</div>

Langkah selanjutnya kita akan membuat event keyup agar ketika kita melakukan input text maka function search langsung dijalankan.

let keyword = document.getElementById("keyword");
keyword.onkeyup = function(){
  let text = this.value;
  app.search(text)
}

let keyword = document.getElementById("keyword");

keyword.onkeyup = function(){

let text = this.value;

app.search(text)

}

Dan langkah selanjutnya kita buatkan function search didalam function app yang sudah kita buat. berikut ini scriptnya ya teman-teman.

search:function(text){
    load_ajax('GET', 'app/search.php?keyword='+text, null, function(data) {
      generate_post(data)
    })
  }

search:function(text){

load_ajax('GET', 'app/search.php?keyword='+text, null, function(data) {

generate_post(data)

})

}

Nah terakhir disini kita buat file baru dengan nama search.php yang kita simpan di folder app. Dimana berisi perintah atau request melakukan pencarian dengan keyword yang kita ketik.

<?php 
#search data

$db = new Mysqli('localhost', 'dumet', 'school', 'webmaster');
$keyword = $_GET['keyword'];

$query = $db->query("SELECT * FROM shelli_posts 
	WHERE title LIKE '%$keyword%' 
	ORDER BY id DESC");

$posts = [];

if($query->num_rows > 0) :
	while($row = $query->fetch_assoc()) :
		extract($row);

		$data = array(
			'id' => $id,
			'title' => $title,
			'body' => $body,
			'created_at' => $created_at
		);

		#push data
		array_push($posts, $data);

	endwhile;

	#output json
	echo json_encode($posts);
else:

	echo json_encode(array(
		'message' => 'No Posts Found'
	));

endif;	
 ?>

<?php

#search data

$db = new Mysqli('localhost', 'dumet', 'school', 'webmaster');

$keyword = $_GET['keyword'];

$query = $db->query("SELECT * FROM shelli_posts

WHERE title LIKE '%$keyword%'

ORDER BY id DESC");

$posts = [];

if($query->num_rows > 0) :

while($row = $query->fetch_assoc()) :

extract($row);

$data = array(

'id' => $id,

'title' => $title,

'body' => $body,

'created_at' => $created_at

);

#push data

array_push($posts, $data);

endwhile;

#output json

echo json_encode($posts);

else:

echo json_encode(array(

'message' => 'No Posts Found'

));

endif;

Dan finnaly jadilah membuat function search dengan menggunakan ajax javascript. Dimana ketika kita ketik suatu text di form pencarian data akan muncul tanpa harus mereload halamannya.

Demikian artikle tentang cara Membuat Fungsi Search Dengan Ajax Javascript. Semoga dapat bermanfaat dan selamat mencoba ya teman.

Facebook DUMET School

Categories