diff --git a/resources/js/admin/lib.js b/resources/js/admin/lib.js
index 3fd3a45..fca0803 100644
--- a/resources/js/admin/lib.js
+++ b/resources/js/admin/lib.js
@@ -23,6 +23,7 @@ import 'chart.js';
 import '@coreui/coreui-plugin-chartjs-custom-tooltips';
 import 'datatables.net-bs4';
 import 'datatables.net-responsive-bs4';
+import 'block-ui';
 
 try {
 
diff --git a/resources/js/app-common.js b/resources/js/app-common.js
index 0245804..316f5c0 100644
--- a/resources/js/app-common.js
+++ b/resources/js/app-common.js
@@ -1,5 +1,6 @@
 import {dataTable} from "./utils/datatable";
-
+import {block, blockElement, unblock, unblockElement} from "./utils/blockui";
+import {init as initSelect2} from './utils/select2';
 
 $('.logout-btn').on('click', e => {
     e.preventDefault()
@@ -11,4 +12,11 @@ $('.logout-btn').on('click', e => {
  */
 app.utils = {
     dataTable: dataTable,
+    blockui: {
+        blockElement: blockElement,
+        unblockElement: unblockElement,
+        block: block,
+        unblock: unblock
+    },
+    select2: initSelect2,
 }
diff --git a/resources/js/utils/blockui.js b/resources/js/utils/blockui.js
new file mode 100644
index 0000000..fbd49f5
--- /dev/null
+++ b/resources/js/utils/blockui.js
@@ -0,0 +1,20 @@
+export const blockElement = function(ele, option = {}) {
+    $(ele).block(Object.assign({
+        message: null
+    }, option))
+}
+
+export const unblockElement = function(ele) {
+    $(ele).unblock();
+}
+
+export const block = function(ele, option = {}) {
+    $.blockUI(Object.assign({
+        message: ele,
+        onOverlayClick: $.unblockUI
+    }, option))
+}
+
+export const unblock = function() {
+    $.unblockUI();
+}
diff --git a/resources/js/utils/select2.js b/resources/js/utils/select2.js
new file mode 100644
index 0000000..432fde6
--- /dev/null
+++ b/resources/js/utils/select2.js
@@ -0,0 +1,24 @@
+export const init = (selector, options = {}) => {
+    return $(selector).select2(Object.assign({
+        templateResult: item => {
+            if (!item.id) {
+                return item.text;
+            }
+            let text = item.text,
+                search = $(selector).data('select2').dropdown.$search.val(),
+                _text = text.split(''),
+                startIndex = 0
+            $.each(search.split(''), (index, ch) => {
+                for (let i = startIndex; i < _text.length; i++) {
+                    if(_text[i] == ch) {
+                        _text[i] = '<span class="select2-rendered-highlight" style="color:red;">' + ch + '</span>'
+                        startIndex = i;
+                        break;
+                    }
+                }
+            })
+
+            return $('<span>' + _text.join('') + '</span>');
+        }
+    }, options))
+}