ทำ dropdown แบบกรอกข้อความค้นหาได้โดยใช้ yii2-bootstrap4-dropdown (ของ kartik-v)

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16022
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

ทำ dropdown แบบกรอกข้อความค้นหาได้โดยใช้ yii2-bootstrap4-dropdown (ของ kartik-v)

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

Combobox เป็น dropdown ที่สามารถเลือกข้อมูลได้หลายๆ ข้อมูลในช่อง dropdown นั้น และสามารถพิมพ์ค้นหาจากตัวเลือกใน dropdown นั้นได้อีกด้วย ซึ่งข้อแตกต่างจาก dropdown ปกติก็ตรงที่เลือกค่าได้เพียง 1 ค่านั้นเอง (ดูตัวอย่างได้จากบทความ viewtopic.php?f=142&t=58793)
screenshot-www.w3schools.com-2020.12.23-17_08_12.png
screenshot-www.w3schools.com-2020.12.23-17_08_12.png (14.77 KiB) Viewed 1583 times
Dropdown ปกติ
screenshot-demos.krajee.com-2020.12.23-17_14_12.png
screenshot-demos.krajee.com-2020.12.23-17_14_12.png (24.85 KiB) Viewed 1583 times
screenshot-demos.krajee.com-2020.12.23-17_15_42.png
screenshot-demos.krajee.com-2020.12.23-17_15_42.png (24.34 KiB) Viewed 1583 times
Dropdown แบบ Combobox

ส่วนของ Widgets ของ kartik-v จะเป็นตัวช่วยในการทำ dropdown แบบ Combobox นั้นเอง ซึ่งจะใช้ jQuery, Bootstrap, Ajax เข้ามาช่วยให้ dropdown ของเราน่าใช้มากยิ่งขึ้น
หากเราจะต้องใช้ Widgets ของ kartik-v นั้นจะต้องประกอบไปด้วย
1. Bootstrap ดูวิธีติดตั้งที่ viewtopic.php?f=73&t=33612
2. Widgets ของ kartik-v วิธีติดตั้งดูที่ viewtopic.php?f=72&t=71782
3. หน้า View

ขั้นตอนการทำ
1. ไปที่ไฟล์หน้า View ของเรา ด้านบนให้เรียก widgets ของ kartik-v

โค้ด: เลือกทั้งหมด

<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\db\Query;
use yii\helpers\BaseUrl;
use yii\helpers\Url;
use kartik\select2\Select2;
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="jquery-latest.min.js"></script>
2. ในไฟล์หน้า View ตรงส่วนที่จะให้เป็น dropdown ให้ใส่คำสั่งดังนี้

โค้ด: เลือกทั้งหมด

<?php
$sele_option=array('001'=>'Thailand','002'=>'Alaska');  //----เป็นตัวเลือก (option) ของ dropdown ถ้าใน Yii จะอยู่ในรูปแบบ Array 
?>
<table>
	<tr>
		<td>
		<?php 
		echo Select2::widget([
			'name' => 'dropdown1',  //---เป็น name ของ dropdown แนะนำให้ใส่ name และ id เป็นชื่อเดียวกันเพื่อกันความสับสนในการเรียกใช้
			'data' =>$sele_option, //----เป็นตัวเลือก (Option) ใน dropdown
			'options' => [
				'placeholder' => 'Select a state ...',	//--แสดงข้อความตอนที่เรายังไม่เลือกข้อมูล				
				'id' => 'dropdown1',  //---เป็น id ของ dropdown เรียกใช้ตอน submit ฟอร์ม
			],
			'pluginOptions' => [
				'allowClear' => true,
				//--กำหนดจำนวนอักษรที่จะค้นหา เมื่อกระทำการกรอกตัวอักษรที่ช่องค้นหาของ dropdown จะทำการค้นหาคำที่ใกล้เคียงให้ 
				'minimumInputLength' => 1, 
			       //----เป็นส่วนของการค้นหาข้อมูลใน dropdown
				'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
				'templateResult' => new JsExpression('function(user) { return user.text; }'),
				'templateSelection' => new JsExpression('function (user) { return user.text; }'),
			],
			'value'=>'', 
		]);
		?>
		</td>
	</tr>
</table>
3. หลังจากนั้นจะได้ผลลัพท์ ดังรูป
screenshot-demos.krajee.com-2020.12.23-17_14_12.png
screenshot-demos.krajee.com-2020.12.23-17_14_12.png (24.85 KiB) Viewed 1583 times
ข้อมูลอ้างอิง :
https://demos.krajee.com/widget-details/select2
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 49