Dropdown ปกติ
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>
โค้ด: เลือกทั้งหมด
<?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>
https://demos.krajee.com/widget-details/select2