Advertisement
Virajsinh

Select2 Independ Search Without Ajax

Jun 24th, 2024 (edited)
1,185
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 1.86 KB | Source Code | 0 0
  1. <script type="text/javascript">
  2.    
  3.     $('employee_id').select2();
  4.  
  5.     // PHP-generated employee data
  6.     const employees = {!! $employeeDataJson !!};
  7.  
  8.     // Function to filter and populate employee dropdown
  9.     function filterEmployees() {
  10.         const type = $('#emp_type').val();
  11.         const department = $('#department').val();
  12.  
  13.         let filteredEmployees = employees;
  14.  
  15.         if(type){
  16.             filteredEmployees = filteredEmployees.filter(employee => employee.employee_type === type);
  17.         }
  18.  
  19.         if(department){
  20.             // Single Department
  21.             filteredEmployees = filteredEmployees.filter(employee => employee.department_type === department);
  22.             // Multiple Department
  23.             // var departments = [3,5,6,78,41]; array
  24.             // filteredEmployees = filteredEmployees.filter(employee =>
  25.             //  departments.includes(employee.department_type) // Interger
  26.             //   departments.includes(employee.department_type.toString()) // String
  27.             // );
  28.         }
  29.  
  30.         // Clear current options
  31.         $('#employee_id').empty().append('<option value="">Select Employee</option>');
  32.  
  33.         // Add filtered options
  34.         filteredEmployees.forEach(employee => {
  35.             // $('#employee_id').append(new Option(employee.name, employee.id));
  36.             var newOption = $('<option>');
  37.             newOption.attr('value', employee.id); // Set the value attribute
  38.             newOption.text(employee.name); // Set the text content
  39.             newOption.attr('data-department_type', employee.department_type);
  40.             newOption.attr('data-employee_type', employee.employee_type);
  41.             newOption.attr('data-shift_start', employee.shift_start);
  42.             newOption.attr('data-shift_end', employee.shift_end);
  43.             $('#employee_id').append(newOption);
  44.         });
  45.  
  46.         // Refresh Select2
  47.         $('#employee_id').trigger('change');
  48.     }
  49.  
  50.     // Event listeners
  51.     $('#emp_type, #department').on('change', filterEmployees);
  52.  
  53.     // Initial population
  54.     filterEmployees();
  55. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement