Cara membuat auto complete search menggunakan ajax

auto complete search menggunakan ajax

Membuat auto complete search atau pencarian otomatis pada dasarnya hampir sama dengan cara pada artikel ane Mengisi form otomatis dengan ajax. Bedanya adalah pada artikel tersebut memakai combo box. Nah disini akan ane jelaskan bagaimana cara membuatnya untuk input text field yang bisa difungsikan sebagai pencarian otomatis atau bisa juga untuk pengisian form otomatis. Yuk ikutin langkah – langkah pembuatannya.

Kali ini ane menggunakan jQuery dan jQuery-UI serta bootstrap untuk membuat auto complete search supaya memudahkan pemakaian javascript, ajax dan stylenya. Selanjutnya buatlah sebuah file php atau html, misalnya cari.php dan isi file tersebut dengan script sebagai berikut:

<html>
    <head>
        <title>Cara membuat auto complete search menggunakan ajax</title>
    </head>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-dialog-min.css">
    <body>
        <form class="form-horizontal" action="<?php $_SERVER['PHP_SELF']; ?>" method="post" autocomplete="off">
            <fieldset style="width: 50%; margin: 0 auto;">
                <center><legend>Form Pencarian</legend></center>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtNumber">Nomor Induk</label>
                    <div class="col-md-5">
                        <input id="txtNumber" name="txtNumber" placeholder="tulis nomor induk" class="form-control input-md" required="" type="text">
                        <span class="help-block" style="color: red"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtName">Nama</label>
                    <div class="col-md-5">
                        <input id="txtName" name="txtName" class="form-control input-md" required="" type="text" readonly>
                        <span class="help-block" style="color: red"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtEmail">Email</label>
                    <div class="col-md-5">
                        <textarea id="txtEmail" name="txtEmail" class="form-control input-md" required="" readonly></textarea>
                        <span class="help-block" style="color: red"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtPhone">Telepon</label>
                    <div class="col-md-5">
                        <input id="txtPhone" name="txtPhone" class="form-control input-md" required="" type="text" readonly>
                        <span class="help-block" style="color: red"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtAlasan">Alasan</label>
                    <div class="col-md-5">
                        <input id="txtAlasan" name="txtAlasan" placeholder="tulis alasan" class="form-control input-md" required="" type="text">
                        <span class="help-block" style="color: red"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="btnSimpan"></label>
                    <div class="col-md-4">
                        <button id="btnSimpan" name="btnSimpan" class="btn btn-primary">Simpan</button>
                    </div>
                </div>
            </fieldset>
        </form>
        <script type="text/javascript" src="js/jquery-min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-min.js"></script>
        <script type="text/javascript" src="js/bootstrap-dialog-min.js"></script>
        <script type="text/javascript" src="js/cari.js"></script>
    </body>
</html>

Silahkan disesuaikan dengan bentuk design, isi content, dan url asset / resources sesuai dengan kebutuhan ente. Pada code diatas, terdapat sebuah asset js “cari.js”. File cari.js merupakan code javascript yang akan kita buat. Berikut ini penampakannya:

$(document).ready(function() {
    var txtNumber = $('#txtNumber');
    var txtName = $('#txtName');
    var txtEmail = $('#txtEmail');
    var txtPhone = $('#txtPhone');
    var charLength = 3;
    $('#txtNumber').autocomplete({
        source: 'caridata.php',
        minLength: 3,
        select: function(evt, data) {
            txtName.val(data.item.name);
            txtEmail.val(data.item.email);
            txtPhone.val(data.item.phone);
        }
    });
});

Lah dikit amat code nya mas broh? Ya mau gimana lagi, emang cuma segitu. Lagian itu juga blom disesuaikan dengan script punya ente. Perintah $(‘#txtNumber’).autocomplete() berasal dari plugin jquery-ui, disitulah salah satu kunci keberhasilan auto complete search menggunakan ajax-nya. Nah pada code diatas juga terdapat “source’. Source tersebut bisa berisi array, object, function, atau nama file php untuk mengambil dari data server, tentunya dengan bantuan php. Yuk mari kita lihat isi file caridata.php:

<?php
    $data = file_get_contents('data.json');
    $data = json_decode($data);

    $output = array();
    
    foreach ($data as $k => $v) {
        if (preg_match("/".$_GET['term']."/", $v->number)) {
            $output[] = (object) array(
                'id' => $v->number,
                'label' => $v->number.' - '.$v->name,
                'value' => $v->number,
                'name' => $v->name,
                'email' => $v->email,
                'phone' => $v->phone
            );
        }
    }

    echo json_encode($output);
?>

Dalam auto complete search menggunakan ajax ini ane tidak menggunakan data yang berasal dari database, melainkan dari sebuah yang menyimpan data dalam bentuk json. Jika ente ingin menggunakan database, silahkan aja, ga masalah kok, tinggal diganti aja $data-nya. Trus isi file data.json itu apa? Nih isinya:

[{
    "number": "1111",
    "name": "John Doe",
    "email": "johndoe@mail.com",
    "phone": "1234567890"
}, {
    "number": "1112",
    "name": "Doel Sumbang",
    "email": "doel@mail.com",
    "phone": "0987654321"
}, {
    "number": "1113",
    "name": "Bapak Kita Kartono",
    "email": "bapakkitakartono@mail.com",
    "phone": "28394090890"
}]

Gampangkan buatnya? Demikianlah artikel Cara membuat auto complete search menggunakan ajax, jika ada yang kurang jelas atau mau memberikan saran, silahkan diisi comment nya yah. BTW penampakan hasilnya sama seperti gambar diawal artikel ini.

Jika bermanfaat, follow dan share ya...
6 Comments
  1. Ridwan
    • Apri Pardede
      • Ridwan
        • Apri Pardede
  2. shaka naro
    • Apri Pardede

Leave a Reply

Your email address will not be published. Required fields are marked *

error

Jika bermanfaat, follow dan share ya...