So, if we are creating a form and we have the need to add a dropdown or select input type, then using select2 js and adding options dynamically will improve our form’s loading performance<\/a>.<\/p>\n\n\n\n
Please follow the below steps to add dropdown using select2 js: 3. Create demo.phtml file inside app\/code\/Vendor\/CustomModule\/view\/frontend\/templates\/ directory.<\/p>\n\n\n\n 4. Create style2.css file inside app\/code\/Vendor\/CustomModule\/view\/frontend\/web\/css\/ directory. And Put style2.js file inside app\/code\/Vendor\/CustomModule\/view\/frontend\/web\/js\/ directory. 6. Now, Create CustomerAccountList.php Controller inside app\/code\/Vendor\/CustomModule\/Controller\/Index\/ directory. 7. Now, when we will execute the code and run the controller on the browser. We will get the response as in the following images.<\/p>\n\n\n\n
1. Download the select2 js file<\/a>.
2. Create routename_controller_actionname.xml file inside Vendor\/CustomModule\/view\/frontend\/layout\/ directory.<\/p>\n\n\n\n<?xml version="1.0"?>\n<!--\n\/**\n * Vendor CustomModule\n *\n * @category Webkul\n * @package Vendor_CustomModule\n * @author Khushboo Sahu\n *\/\n-->\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n <head>\n <css src="Vendor_CustomModule::css\/select2.css" rel="stylesheet" type="text\/css" \/>\n <\/head>\n <body>\n <referenceContainer name="content">\n <block class="Magento\\Framework\\View\\Element\\Template" \n name="select_demo_index" \n template="Vendor_CustomModule::demo.phtml" \n cacheable= "false"\/>\n <\/referenceContainer>\n <\/body>\n<\/page><\/pre>\n\n\n\n
<?php \n$requestUrl = $block->getUrl('routename\/controller\/actionanme'); \/\/to fetch customer account list\n?>\n<select class="select2" id="wk-customers" style="width:40%">\n <option value="">Select Customer...<\/option>\n<\/select>\n<br\/><br\/>\n<button id="getvaluebtn" title="Save" type="button" class="action-default scalable action-save action-secondary">\n <span>Get Selected Option Value<\/span>\n<\/button>\n \n<script type="text\/javascript">\n require([\n "jquery",\n "Vendor_CustomModule\/js\/select2"\n ], function($) {\n $('#wk-customers').select2({\n ajax: {\n url: "<?= \/* @noEscape *\/ $requestUrl ?>"+"?isAjax=true",\n delay: 250,\n type: "GET",\n data: function (params) {\n return {\n q: params.term,\n page: params.page\n };\n },\n error: function (response) {\n $(".messages").css("display", "none");\n },\n processResults: function (data, params) {\n params.page = params.page || 1;\n\n return {\n results: data.results,\n pagination: {\n more: (params.page * 1) < data.noOfPages\n }\n };\n },\n cache: true\n },\n placeholder: 'Choose Customer...',\n theme: "classic",\n templateSelection: formatListSelection\n });\n\n function formatListSelection (item) {\n return item.text;\n }\n\n $("body").on("click", "#getvaluebtn", function () {\n var newVal = $("#wk-customers").val();\n alert(newVal);\n });\n });\n<\/script><\/pre>\n\n\n\n
5. Create Index.php file inside app\/code\/Vendor\/CustomModule\/Controller\/Index\/ directory.<\/p>\n\n\n\n<?php\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Vendor_CustomModule\n * @author Webkul\n * @copyright Copyright (c) Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Vendor\\CustomModule\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Action;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Index extends Action\n{\n \/**\n * @var PageFactory\n *\/\n protected $_resultPageFactory;\n\n \/**\n * initialization\n *\n * @param Context $context\n * @param PageFactory $resultPageFactory\n *\/\n public function __construct(\n Context $context,\n PageFactory $resultPageFactory\n ) {\n $this->_resultPageFactory = $resultPageFactory;\n parent::__construct($context);\n }\n \n public function execute()\n {\n $resultPage = $this->_resultPageFactory->create();\n $resultPage->getConfig()->getTitle()->set(__("Select2 Demo"));\n \n return $resultPage;\n }\n}<\/pre>\n\n\n\n
When we will execute this controller, it will return response data in JSON format, in which the “results” key contains the customers’ list.<\/p>\n\n\n\n<?php\n\/**\n* Webkul Software.\n*\n* @category Webkul\n* @package Vendor_CustomModule\n* @author Webkul\n* @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n* @license https:\/\/store.webkul.com\/license.html\n*\/\n\nnamespace Vendor\\CustomModule\\Controller\\Index;\n\nuse Magento\\Framework\\Controller\\ResultFactory;\nuse Magento\\Framework\\App\\Action\\Context;\n\nclass CustomerAccountList extends \\Magento\\Framework\\App\\Action\\Action\n{\n \/**\n * @var ResultFactory\n *\/\n protected $_resultFactory;\n\n \/**\n * @var array\n *\/\n protected $results = [];\n\n \/**\n * @var int\n *\/\n private $resultsCount;\n\n \/**\n * Object initialization.\n *\n * @param Context $context\n * @param \\Magento\\Customer\\Model\\CustomerFactory $customerFactory\n * @param \\Magento\\Framework\\Controller\\ResultFactory $resultFactory\n *\/\n public function __construct(\n Context $context,\n \\Magento\\Customer\\Model\\CustomerFactory $customerFactory,\n \\Magento\\Framework\\Controller\\ResultFactory $resultFactory\n ) {\n $this->_resultFactory = $resultFactory;\n $this->customerFactory = $customerFactory;\n parent::__construct($context);\n }\n\n \/**\n * Executes request and return json data\n * @return json\n *\/\n public function execute()\n {\n $returnArray = [];\n $returnArray["success"] = false;\n $returnArray["message"] = "";\n $resultJson = $this->_resultFactory->create(ResultFactory::TYPE_JSON);\n $wholeData = $this->getRequest()->getParams();\n\n if ($wholeData) {\n try {\n $query = "";\n $pageSize = 10;\n $pageNumber = $wholeData["page"] ?? 1;\n $query = trim($wholeData["q"] ?? "");\n \n $customerList = [];\n $customerList = $this->getCustomers($query, $pageSize, $pageNumber);\n \n $returnArray["success"] = true;\n $returnArray["results"] = $customerList;\n $returnArray["totalCount"] = $this->resultsCount;\n $noOfPages = ($this->resultsCount > 0)?$this->resultsCount\/$pageSize : 1;\n $returnArray["noOfPages"] = ceil($noOfPages);\n \n $resultJson->setData($returnArray);\n return $resultJson;\n } catch (\\Exception $e) {\n $returnArray["message"] = $e->getMessage();\n $resultJson->setData($returnArray);\n return $resultJson;\n }\n } else {\n $returnArray["message"] = __("Invalid Request");\n $resultJson->setData($returnArray);\n return $resultJson;\n }\n }\n\n \/**\n * get customers\n * @param string $query\n * @param int $pageSize\n * @param int $pageNumber\n * @return array\n *\/\n public function getCustomers($query = "", $pageSize = 20, $pageNumber = 1)\n {\n try {\n $customers = $this->customerFactory->create()\n ->getCollection()\n ->addAttributeToSelect('*');\n \n if (!empty($query)) {\n $customers->addAttributeToFilter(\n [\n ["attribute"=>"firstname", "like"=>'%'.$query.'%'],\n ["attribute"=>"email", "like"=>'%'.$query.'%'],\n ["attribute"=>"lastname", "like"=>'%'.$query.'%']\n ]\n );\n }\n $this->resultsCount = $customers->count();\n if ($customers) {\n $customers->setPageSize($pageSize)->setCurPage($pageNumber);\n }\n $customers->getSelect()\n ->reset(\\Zend_Db_Select::COLUMNS)\n ->columns(['entity_id', 'email', 'firstname', 'lastname']);\n $customers->getSelect()->reset(\\Zend_Db_Select::ORDER);\n $customers->getSelect()->order("email", "DESC");\n \n $data = (!empty($customers)) ? $customers->getData() : [];\n\n if (!empty($data)) {\n foreach ($data as $index => $value) {\n $result = [];\n $fullname = ($value["firstname"] ?? "")." ".($value["lastname"] ?? "");\n $result["id"] = $value["email"] ?? "";\n $result["text"] = $fullname.' ('. $result["id"] .')';\n $this->results[] = $result;\n }\n }\n } catch (\\Exception $e) {\n echo $e->getMessage();\n die("Exception Occurred");\n }\n \n return $this->results;\n }\n}<\/pre>\n\n\n\n![\"Select2-js\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/09\/Select2-1200x556.png\")
<\/figure>\n\n\n\n![\"Select2Search\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/09\/Select2Search.png\")
<\/figure>\n\n\n\n![\"Select2GetValue\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/09\/Select2GetValue-1200x408.png\")
<\/figure>\n\n\n\n