Cara Membuat Search didalam Select Options -

Search disini terdapat didalam form select option jadi saat diklik pada select maka akan muncul sebuah fungsi search didalamnya. Maka dari itu fungsi search tidak harus selalu muncul atau terlihat pada tampilan, jadi dalam kasus ini tampilan search ini akan sangat membantu saat pencarian jika data pada select terlalu banyak. Baiklah bagaimana sih cara membuat search didalam select option yuuuk perhatikan cara pembuatannya sebagai berikut.

Langkah pertama buatlah file HTML untuk struktur dasarnya seperti code dibawah ini:

<div class="container">
		<h2>Membuat Search di Select Option</h2>
		<select class="theSelect">
			<option value="Codeigniter">Codeigniter</option>
			<option value="FuelPHP">FuelPHP</option>
			<option value="PhalconPHP">PhalconPHP</option>
			<option value="Slim">Slim</option>
			<option value="Silex">Silex</option>
			<option value="CakePHP">CakePHP</option>
			<option value="Symfony">Symfony</option>
			<option value="Yii">Yii</option>
			<option value="Laravel">Laravel</option>
			<option value="Lumen">Lumen</option>
			<option value="Zend">Zend</option>
		</select>
	</div>

nah pada select option saya memberikan beberapa data untuk dipilih, sebelumnya pada tag head berikan library JQuery dan plugin select2 coba perhatikan code berikut

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Search di Select Option Dengan Jquery </title>
	<link rel="stylesheet" href="">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

Selanjutnya ketikkan script dibawah ini yang digunakan dalam jquery:

	<script>
		$(".theSelect").select2();
	</script>

Jika sudah simpan filenya lalu kita sahabat lihat tampilannya pada browser masing-masing apakah seperti tampilan dibawah ini:

Demikian pembahasan kali ini tentang cara membuat search didalam select options, semoga bermanfaat dan sampai jumpa dengan pembahasan artikel lainnya,

terima kasih

Cara Membuat Search didalam Select Options

Kategori