ajax laravel 实时搜索问题

Question

public function search_inv(Request $request)
{
    if($request->ajax()) {
        $data = inventory::where('p_name', 'LIKE', $request->country.'%')->get();
        $output = '';
       
        if (count($data)>0) {
            $output = '<ul class="list-group" style="display: block; position: relative; z-index: 1">';
            foreach ($data as $row) {
                $output .= '<table class="table table-bordered table-hover" id="abc" style="width:100%; float:right;">
                <tr style="width:100%;">
                    <th style="width:17.5%; text-align:center;">Piece Name</th>
                    <th style="width:15%; text-align:center;">Piece Model</th>
                    <th style="width:14%; text-align:center;">Piece Quantity</th>
                    <th style="width:13%; text-align:center;">Piece Price</th>
                   
                </tr>';
                
              $output.="<tr><td style=text-align=center>$row->p_name</td><td style=text-align=center>$row->p_model</td><td style=text-align=center>$row->p_Pieces</td><td style=text-align=center>$row->p_amount</td></tr>";
            }
            $output .=   '</table>';
        } else {
            $output .= '<li class="list-group-item">'.'No results'.'</li>';
        }
        return $output;
    }
}

I don't know what is the issue it is searching perfect but when I erase the search it duplicates the table header.

Answer 1

That's because your headers are within your foreach loop so every time it iterates, it's appending the headers to the output string (also your opening table element).

This should fix your issue:

 if($request->ajax()) {
      
    $data = inventory::where('p_name', 'LIKE', $request->country.'%')->get();
    
    $output = '<table class="table table-bordered table-hover" id="abc" style="width:100%; float:right;">';
    $output .= '<tr style="width:100%;">
                    <th style="width:17.5%; text-align:center;">Piece Name</th>
                    <th style="width:15%; text-align:center;">Piece Model</th>
                    <th style="width:14%; text-align:center;">Piece Quantity</th>
                    <th style="width:13%; text-align:center;">Piece Price</th>
                </tr>';

    if (! $data) {
        $output .= '<li class="list-group-item">No results</li>';
    }else{
        $data->each( function( $row ) use ( &$output ){
            $output .= '<tr>
                <td style="text-align:center">' . $row->p_name . '</td>
                <td style="text-align:center">' . $row->p_model . '</td>
                <td style="text-align:center">' . $row->p_Pieces . '</td>
                <td style="text-align:center">' . $row->p_amount . '</td>
            </tr>';
        });
    }

    $output .= '</table>';
    
    return $output;
}