Autocomplete Textbox dan Multiple Input Menggunakan jQuery

Pada kesempatan kali ini saya akan membuat Autocomplete Textbox dan Multiple Input Menggunakan Jquery. Autocomplete adalah daftar saran untuk dipilih saat kita sedang mengetik. Langkah pertama teman-teman buat terlebih database yang akan ditampilkan pada textbox untuk suggestion atau saran lalu membuat struktur html seperti di bawah ini.


<!DOCTYPE html>
<html>
    <head>
        <title>Autocomplete Textbox dan Multiple Input Menggunakan Jquery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
    </head>
    <body>
        <br />
        <br />
        <div class="container">
            <h1 align="center">Autocomplete Textbox dan Multiple Input Menggunakan Jquery</h1>
            <br />
            <br />
            <br />
            <div class="row">
                <div class="col-md-2">
                </div>
                <div class="col-md-8">
                    <div class="form-group">
                        <label>Masukkan Multiple Data Input</label>
                        <div class="input-group">
                            <input type="text" id="search_data" placeholder="" autocomplete="off" class="form-control input-lg" />
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-primary btn-lg" id="search">Get Value</button>
                            </div>
                        </div>
                        <br />
                        <span id="paket_kursus"></span>
                    </div>
                </div>
                <div class="col-md-2">                </div>
            </div>
        </div>
    </body>
</html>

 

Jika sudah langkah kedua masih di file yang sama teman-teman buat script jquery  untuk mengambil data yang bersumber dari database.

<script>
  $(document).ready(function(){
      
    $('#search_data').tokenfield({
        autocomplete :{
            source: function(request, response)
            {
                jQuery.get('fetch.php', {
                    query : request.term
                }, function(data){
                    data = JSON.parse(data);
                    response(data);
                });
            },
            delay: 100
        }
    });

    $('#search').click(function(){
        $('#paket_kursus').text($('#search_data').val());
    });

  });
</script>

Jika  sudah maka tahap terakhir teman-teman buat file baru dengan nama fetch.php lalu buat script php untuk membuat perintah ke database seperti di bawah ini.

<?php

$data = array();

if(isset($_GET["query"])){
 $connect = new PDO("mysql:host=localhost; dbname=test", "dumet", "school");

 $query = "
 SELECT kursus_paket FROM dumet
 WHERE kursus_paket LIKE '".$_GET["query"]."%'
 ORDER BY kursus_paket ASC
 LIMIT 15
 ";
 $statement = $connect->prepare($query);
 $statement->execute();
 while($row = $statement->fetch(PDO::FETCH_ASSOC)){
  $data[] = $row["kursus_paket "];
 }
}

echo json_encode($data);

?>

Jika sudah maka teman-teman boleh mencoba untuk membukanya di browser, lalu melakukan ketik pada textbox atau input untuk menampilkan list sugesstion  atau sarannya.

Demikian artikel tentang cara membuat Autocomplete Textbox dan Multiple Input Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba.

12 Desember 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat