TUTORIAL

JQuery

Tutorial sederhana membuat pencarian (Live Search) menggunakan Bahasa PHP, JQuery dan AJAX

09-07-2020 07:06:49 BY Alfikri Read 297x 3 min read
Halo Klinik Coders...

Di tutorial ini kita akan mempelajari bagaimana membuat sebuah pencarian atau bahasa kerennya Live Search. Harapan saya setelah membaca tutorial ini anda dapat menerapkannya di berbagai aplikasi yang membutuhkan navigasi pencarian.

Tahap#1 : Persiapan

Tahap ini kita harus menyiapkan library JQuery. Disini saya menggunakan JQuery 3.5.1 dan untuk alamat CDNnya sebagai berikut :

https://code.jquery.com/jquery-3.5.1.min.js


Tahap#2 : Instalasi

    1. cari.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" size="30" id="search" onkeyup="cari(this.value)">
    <div id="result"></div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

Penjelasan :

    Disini kita menggunakan event onkeyup untuk memanggil fungsi cari dan <div id="result"> sebagai output dari pencarian.

    2. data.php

<?php

$str = $_GET['str'];
$arr = array("klinik code" => 'Hello Klinik Code'"html" => 'Hello HTML'"php" => 'Hello PHP');

if (array_key_exists($str, $arr)) {
    echo '<a href="https://www.google.com/?q=' . $arr[$str] . '" target="_blank">' . $arr[$str] . '</a>';
}
?>

Penjelasan :

    Untuk proses pencariannya kita buat sample data menggunakan array dan pencariannya kita menggunakan array_key_exists.

    3. script.js

function cari(str) {
    if (str.length >= 3) {
        $.ajax({
            url: 'data.php',
            dataType: 'HTML',
            type: 'GET',
            data: {
                str: str
            },
            success: function (x) {
                $('#result').html(x)
                    .css('border'"1px solid #A5ACB2")
                    .css('width''205px');
            }
        });
    } else {
        $('#result').html('')
            .css('border'"0px");
    }
}

Penjelasan :

    Untuk fungsi cari memiliki alur sebagai berikut :
    1. Jika panjang inputan besar sama dengan (>=) 3
    2. Lakukan proses pemanggilan pada data.php
    3. Jika proses berhasil , data.php akan mengeluarkan output untuk ditampilkan kedalam <div id="result">

Tahap#3 : Uji Coba

Jika semua tahapan diatas benar maka hasilnya bisa kita lihat seperti gambar dibawah ini :


Kesimpulan

Dari tutorial diatas dapat kita ambil kesimpulannya yaitu proses pencarian (Live Search) sangat bermanfaat untuk navigasi pada sebuah aplikasi web. Hanya dengan menggunakan Library JQuery dan AJAX kita sudah dapat membuat pencarian (Live Search)

Sekian tutorial dari saya, jika ada pertanyaan silahkan isi dikolom komentar dibawah ini.

Let's Coding...

Demo

About author

Alfikri

Saya seorang web developer. Saya sangat suka tantangan untuk mempelejari hal-hal baru dalam dunia pemograman.



Comments

Scroll to Top