Load data from database on table using select2 in laravel-CodePudding

I am trying to fetch data from database on a table in my application. The code works fine using input box but I can't get it to work with select box. Note that I used select2 to filter data in the selectbox.

Here is the Route:

 Route::get('get-student-info/', [ResultController::class, 'get_student_info'])->name('get_student_info');

Controller code:

public function get_student_info(Request $request)
{
    $search_name=$request['search'] ?? "";
    if ($search_name !=""){

            $data=User::where('admission_num','like','%'.$search_name.'%')->get();

            $output='';
        if(count($data)>0){

             $output ='
             <table >
        <thead>
        <tr>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Class</th>
        </tr>
        </thead>
        <tbody>';

            foreach($data as $row){
                $output .='
                <tr>
                <th scope="row">'.$row->name.'</th>
                <td>'.$row->lastname.'</td>
                <td>'.$row->class.'</td>
                </tr>
                ';
            }



     $output .= '
                 </tbody>
                </table>';



        }
        else{

            $output .='No results';

        }

        return $output;

        }

      }

Blade.php:

  <div >
                                        
                                        <select  name="search" id="search" aria-label="Default select example">
                                            <option></option>
                                                @foreach($admission as $admissions)
                                            <option value="{{ $admissions->admission_num }}">{{ $admissions->admission_num }}</option>
                                                @endforeach
                                                </select>
                                    </div>
                                    <div id="search_list"></div>
                                    <br><br>
                                </div>
                                <div ></div>


                            </div>
                        </div>

                        <script>
                            $(document).ready(function(){
                             $('#search').on('keyup',function(){
                                 var query= $(this).val();
                                 $.ajax({
                                    url:"get-student-info",
                                    type:"GET",
                                    data:{'search':query},
                                    success:function(data){
                                        $('#search_list').html(data);
                                    }
                             });
                             //end of ajax call
                            });
                            });
                        </script>

NOTE: The above code works perfectly when I used:

<input type="text" name="search" id="search" placeholder="Enter search name"  onfocus="this.value=''">

But I cannot get it to work with selectbox.

CodePudding user response：

I got it solved by adjusting the Ajax code. I used on('select2:select') event instead of the .on(keyup). And also adjusted url:"get-student-info", Below is the Ajax code.

$(document).ready(function(){

                                 $('#search').on('select2:select',function(){
                                     var query= $(this).val();
                                     console.log(query);

                                     $.ajax({
                                        url:'/get-student-info',
                                        type:"GET",
                                        data:{'search':query},
                                        success:function(data){
                                            $('#search_list').html(data);
                                            //console.log(data);
                                        }
                                 });
                                 //end of ajax call
                                });
                                });

Other parts of the code remain the same.