Membuat Autocomplete dengan jQuery

Membuat Autocomplete dengan jQuery

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat fitur autocomplete dengan menggunakan jQuery dalam sebuah formulir HTML.

See the Pen Membuat Autocomplete dengan jQuery by WebbizID (@De-Orchids) on CodePen.

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Autocomplete dengan jQuery</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      var availableTags = [
        "Apple",
        "Banana",
        "Cherry",
        "Durian",
        "Elderberry",
        "Fig",
        "Grape",
        "Honeydew",
        "Ivy",
        "Jackfruit",
        "Kiwi",
        "Lemon",
        "Mango",
        "Nectarine",
        "Orange",
        "Papaya",
        "Quince",
        "Raspberry",
        "Strawberry",
        "Tomato",
        "Ugli fruit",
        "Vanilla",
        "Watermelon",
        "Xigua",
        "Yellow passionfruit",
        "Zucchini"
      ];
      $("#autocomplete").autocomplete({
        source: availableTags
      });
    });
  </script>
</head>
<body>
  <div class="ui-widget">
    <label for="autocomplete">Pilih buah: </label>
    <input id="autocomplete">
  </div>
</body>
</html>
HTML

Dalam contoh ini, kita menggunakan jQuery UI untuk membuat fitur autocomplete. Pertama, kita perlu memasukkan library jQuery dan jQuery UI ke dalam halaman HTML kita dengan menggunakan tag <script> dan <link>. Kemudian, kita membuat sebuah array availableTags yang berisi daftar buah-buahan yang akan digunakan sebagai sumber data autocomplete.

Selanjutnya, kita menggunakan metode .autocomplete() dari jQuery UI untuk menginisialisasi fitur autocomplete pada elemen input dengan id autocomplete. Kita mengatur sumber data autocomplete menggunakan opsi source dan memberikan array availableTags sebagai nilai.

Dengan demikian, ketika pengguna mulai mengetik di input, fitur autocomplete akan menampilkan pilihan buah-buahan yang sesuai berdasarkan input yang telah diketik sejauh ini.

Tutorial lainnya:

Anda dapat mencoba contoh kode di atas dengan menyalinnya ke dalam file HTML dan membukanya di browser.

Artikel Terbaru ⭐