Added search text highlight

app/Http/Controllers/ProductController.php

@@ -17,6 +17,26 @@ class ProductController extends Controller
     protected array $data = [
         'active'    => 'catalog',
         'title'     => 'Каталог',
+        'id'        => 'products',
+        'header'    => [
+            'id'                        => 'ID',
+            'year'                      => 'Год',
+            'nomenclature_number'       => 'Номер номенклатуры',
+            'article'                   => 'Артикул',
+            'manufacturer'              => 'Производитель',
+            'name_tz'                   => 'Наименование ТЗ',
+            'type_tz'                   => 'Тип по ТЗ',
+            'type'                      => 'Тип',
+            'manufacturer_name'         => 'Наименование производителя',
+            'sizes'                     => 'Размеры',
+            'price_status'              => 'Статус цены',
+            'product_price_txt'         => 'Цена товара',
+            'installation_price_txt'    => 'Цена установки',
+            'service_price_txt'         => 'Цена обслуживания',
+            'total_price_txt'           => 'Итоговая цена',
+            'note'                      => 'Примечания',
+            'created_at'                => 'Дата создания',
+        ]
     ];
 
     public function index(Request $request)

resources/sass/app.scss

@@ -63,4 +63,8 @@
 
 .cursor-pointer {
   cursor: pointer;
+}
+
+.highlight {
+  background-color: yellow;
 }

resources/views/catalog/index.blade.php

@@ -15,26 +15,8 @@
 
 
     @include('partials.table', [
-        'id'        => 'products',
-        'header'    => [
-            'id'                        => 'ID',
-            'year'                      => 'Год',
-            'nomenclature_number'       => 'Номер номенклатуры',
-            'article'                   => 'Артикул',
-            'manufacturer'              => 'Производитель',
-            'name_tz'                   => 'Наименование ТЗ',
-            'type_tz'                   => 'Тип по ТЗ',
-            'type'                      => 'Тип',
-            'manufacturer_name'         => 'Наименование производителя',
-            'sizes'                     => 'Размеры',
-            'price_status'              => 'Статус цены',
-            'product_price_txt'         => 'Цена товара',
-            'installation_price_txt'    => 'Цена установки',
-            'service_price_txt'         => 'Цена обслуживания',
-            'total_price_txt'           => 'Итоговая цена',
-            'note'                      => 'Примечания',
-            'created_at'                => 'Дата создания',
-        ],
+        'id'        => $id,
+        'header'    => $header,
         'data'  => $products
     ])
 

resources/views/partials/table.blade.php

@@ -182,12 +182,14 @@
 @push('scripts')
     <script type="module">
         // on page load set column visible
-        let tableName = $('#tbl').attr('data-table-name');
+        let tbl = $('#tbl');
+        let tableName = tbl.attr('data-table-name');
         let tables = JSON.parse(localStorage.getItem('table_'+tableName));
 
         // on first load create tables object
         if(!tables) { tables = {}; }
 
+        // hide disabled columns
         $.each(tables, function (colName, colStatus) {
             if(!colStatus) {
                 $('.checkbox-'+colName).attr('checked', false);
@@ -195,6 +197,17 @@
             }
         });
 
+        // highlight search text
+        let searchText = $('.search-form input').val();
+        if(searchText !== '') {
+            let innerHTML = tbl.html();
+            let index = innerHTML.indexOf(searchText);
+            if (index >= 0) {
+                innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+searchText.length) + "</span>" + innerHTML.substring(index + searchText.length);
+                tbl.html(innerHTML);
+            }
+        }
+
         $('.table').fadeIn();
 
         $('.toggle-column').on('change', function () {