membuat form input di dalam select 2 options

Tentunya anda sudah tahu dengan plugin select2 bukan?, ya benar plugin ini berfungsi untuk mempercantik tampilan selec box dan mempermudah pencarian data di selectbox, dengan adanya plugin ini user sangat terbantu dalam pencarian data di selectbox pada sebuah form input data.

Dengan kemudahan yang di tawarkan plugin ini banyak digunakan oleh para pengembang website aplikasi untuk mempermudah user dan memberikan user experience yang mengagumkan untuk pengguna, pada kesempatan kali ini saya akan memberikan tutorial singkat untuk membuat form input di dalam select 2 option.

Sebenarnya fitur ini di maksudkan untuk mempermudah user ketika tidak ada option yang diinginkan maka user bisa menambahkan option sendiri di dalam select2 tanpa harus pindah ke halaman input data option tersebut.

Oke, untuk memperjelas yang saya maksud maka anda bisa melihat gambar di bawah ini

bisa dilihat dari gambar di atas, jadi didalam select2 terdapat form input data untuk menambahkan option si select2, jadi ketika textboxt di input dan  klik tombol Add Data maka secara otomatios option di select 2 akan bertambah, bagaimana? sudah terbayang kan oleh anda?

langsung saya saya jelaskan cara membuat  form input di dalam select 2 options, pertama silahkan anda membuat database dengan nama select2, lanjut kemudian dumping SQL berikut.

-- phpMyAdmin SQL Dump

-- version 4.8.0

-- https://www.phpmyadmin.net/

--

-- Host: 127.0.0.1

-- Waktu pembuatan: 03 Des 2019 pada 11.06

-- Versi server: 10.1.31-MariaDB

-- Versi PHP: 7.1.16



SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET AUTOCOMMIT = 0;

START TRANSACTION;

SET time_zone = "+00:00";





/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;



--

-- Database: `select2`

--



-- --------------------------------------------------------



--

-- Struktur dari tabel `provinsi`

--



CREATE TABLE `provinsi` (

  `id_provinsi` int(11) NOT NULL,

  `provinsi` varchar(100) DEFAULT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;



--

-- Dumping data untuk tabel `provinsi`

--



INSERT INTO `provinsi` (`id_provinsi`, `provinsi`) VALUES

(1, 'Aceh'),

(2, 'Sumatera Utara'),

(3, 'Bengkulu'),

(4, 'Jambi'),

(5, 'Riau'),

(6, 'Sumatera Barat'),

(7, 'Sumatera Selatan'),

(8, 'Lampung'),

(9, 'Kepulauan Bangka Belitung'),

(10, 'Kepulauan Riau'),

(11, 'Banten'),

(12, 'Jawa Barat'),

(13, 'DKI Jakarta'),

(14, 'Jawa Tengah'),

(15, 'Jawa Timur'),

(16, 'Daerah Istimewa Yogyakarta'),

(17, 'Bali'),

(18, 'Nusa Tenggara Barat'),

(19, 'Nusa Tenggara Timur'),

(20, 'Kalimantan Barat'),

(21, 'Kalimantan Selatan'),

(22, 'Kalimantan Tengah'),

(23, 'Kalimantan Timur'),

(24, 'Gorontalo'),

(25, 'Sulawesi Selatan'),

(26, 'Sulawesi Tenggara'),

(27, 'Sulawesi Tengah'),

(28, 'Sulawesi Utara'),

(29, 'Sulawesi Barat'),

(30, 'Maluku'),

(31, 'Maluku Utara'),

(32, 'Papua'),

(33, 'Papua Barat'),

(36, 'Jawa Utara');

--

-- Indexes for dumped tables

--



--

-- Indeks untuk tabel `provinsi`

--

ALTER TABLE `provinsi`

  ADD PRIMARY KEY (`id_provinsi`);



--

-- AUTO_INCREMENT untuk tabel yang dibuang

--



--

-- AUTO_INCREMENT untuk tabel `provinsi`

--

ALTER TABLE `provinsi`

  MODIFY `id_provinsi` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=39;

COMMIT;



/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

setelah dumping SQL language di atas maka anda akan mendapatkan tabel provinsi di database select2.

lanjut buatlah sebuah folder dengan nama select2example di direktori c:/xampp/htdocs/select2example kemudian silahkan anda copy dan pastekan kode di bawah ini dan simpan dengan nama conn.php ke di rektori c:/xampp/htdocs/select2example

<?php

$db_host = "localhost";

$db_user = "root";

$db_pass = "";

$db_name = "select2";



$koneksi = mysqli_connect($db_host, $db_user, $db_pass, $db_name);



if(mysqli_connect_errno()){

  echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();

}   

?>

langkah selanjutnya silahkan anda copy dan pastekan kode di bawah ini kemudian simpan dengan nama index.php ke di rektori c:/xampp/htdocs/select2example

<html>

<head>

<title>Select 2 with input textboxt | www.hakkoblogs.com</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />



</head>

<body>

<?php

include "conn.php";

                  if(isset($_POST['input'])){

                    $inputpro   = $_POST['inputpro'];

                    

                    $cek = mysqli_query($koneksi, "SELECT * FROM provinsi WHERE provinsi='$inputpro'");

                    if(mysqli_num_rows($cek) == 0){

                        $insert = mysqli_query($koneksi, "INSERT INTO provinsi(provinsi)

                                          VALUES('$inputpro')") or die(mysqli_error());

                        if($insert){

                          echo 'Data berhasil disimpan!';

                        }else{

                          echo 'Data gagal di simpan!';

                        }

                    }else{

                      echo 'Data sudah ada!';

                    }

                  }

                ?>

<div class="form-group">



                              <label class="col-sm-2 col-sm-2 control-label">Provinsi</label>

                              <div class="col-sm-3">

                              <select name="kode" id="kode" class="form-control select2" required>

                              <option value=""> -- Pilih Provinsi -- </option>

                              <?php 

                              

                    $query1="select * from provinsi";

                    $tampil=mysqli_query($koneksi, $query1) or die(mysqli_error());

                    while($data=mysqli_fetch_array($tampil))

                    {

                    ?>

              <option value="<?php echo $data['provinsi'];?>"><?php echo $data['provinsi'];?></option>

                <?php } ?>

                              </select>

                              </div>

                          </div>

                          <script

  src="https://code.jquery.com/jquery-2.2.4.min.js"

  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="

  crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

                          <script>



$(function () {



  $('.select2')



.select2({



tags: true



}



)



.on('select2:open', () => {





 $(".select2-results:not(:has(a))").append('<form name="inputprovinsi" method="POST" action=""><input type="text" size="10" id="inputpro" name="inputpro"/><input type="submit" id="input" name="input" value="Add Data"/></form><a href="#"></a>');



})}); </script>

</body>

</html>

Langkah terakhir adalah menjalankan aplikasi, silahkan anda akses localhost/select2example di browser, jika berhasil maka anda akan mendapatkan tampilan seperti gambar di atas, bagaimana? mudah bukan? atau anda masih bingung? tenang saya sudah siapkan file nya untuk anda download, silahkan anda menuju ke link berikut ini

DOWNLOAD

silahkan anda coba dan anda praktekkan untuk anda aplikasikan pada form input yang sedang anda buat, karena tanpa mencoba anda tidak akan mendapatkan hasil, semoga tutorial singkat ini bisa bermanfaat untuk anda yang sedang ingin membuat form input di dalam select 2 options, jika artikel ini bermanfaat jangan sungkan untuk share artikel ini.

Pantau terus www.hakkoblogs.com untuk mendapatkan update terbaru seputar pemrograman, source code gratis dan berita seputar teknologi informasi.

Happy Coding & Programming

Share this post