Autocomplete Textbox dan Multiple Input Menggunakan jQuery

12/12/2019    Shelli Ripati    200     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More