Why is my output output twice in blade php?
P粉043470158
P粉043470158 2024-02-26 15:16:22
0
1
319

I'm trying to implement a live search bar. Live search is working, but it prints the output twice, which is annoying. Could you please take a look at where the problem lies? Thanks.

This is my search function code.

public function search(Request $request)
    {
        if ($request->ajax()) {
            
            $output = "";
            $projects = Project::where('title', 'LIKE', '%' . $request->search . '%')
                        ->where('module_code',$request->module_code)
                        ->get();
            $count = count($projects);
            // $projects = array_unique($projects);
            if ($projects) {
                foreach ($projects as $project) {
                    $output .= '<tr>' .
                        '<td>' . $project->team_number . '</td>' .
                        // '<td>' . $count . '</td>' .
                        '<td>' . $project->lab . '</td>' .
                        '<td>' . '<a href="/projects/' . $project->id . '" style="display:block;"><b>' . $project->title . '</b></a>' . '</td>' .
                        '<td>' . $project-> latest_state. '</td>' .
                        '<td>' . $project->team_member_1 . '</td>' .
                        '<td>' . $project->latest_team_member_1_state . '</td>' .
                        '<td>' . $project->team_member_1 . '</td>' .
                        '<td>' . $project->latest_team_member_1_state . '</td>' .
                        '<td>' . $project->team_member_1 . '</td>' .
                        '<td>' . $project->latest_team_member_1_state . '</td>' .
                        '<td>' . $project->ta . '</td>' .
                        '<td>' . $project->created_at . '</td>' .
                        '<td>' .
                        '<button class="btn-sm btn-info pull-left" onclick="location.href = \'/projects/' . $project->id . '\'">Project Details</button> ' .
                        '</td>' .
                        '</tr>';
                }
                return Response($output);
            }
        }
    }

This is the script to do a live search in php Blade:

<script type="text/javascript">
    const getQueryParams = (params, url)=>{
        let href = url;
        let regexp = new RegExp('[?&]' + params + '=([^&#]*)', 'i');
        let qString = regexp.exec(href);
        return qString ? qString[1] : null;
    }
    $('#search').on('keyup',function(){
        $value = $(this).val();
        //alert($value);
        $qString = getQueryParams('module', window.location.href);
        $queryString = 
        $.ajax({
            type : 'get',
            url  : '{{URL::to('search')}}',
            data : {'search':$value, 'module_code', $qString},
            success:function (data) {
                //console.log(data);
                //alert(data);
                $('tbody').html(data);
            }
        });
    })
</script>

This is the code for the search bar in php Blade

<div class="col-sm-5">
                        <input type="text"  class="form-control" id="search" name="search" placeholder="Search..."/>
                    </div>

Before searching:

After searching:

P粉043470158
P粉043470158

reply all(1)
P粉551084295

Damn, I just found out what was causing this problem. This is a bit silly. The original code is here: https://onecompiler.com/posts/3xy39rm78/php-blade-for-staff and the error still exists. The problem is, I added an unnecessary additional tag. The output is placed in labeled places, just like the script:

$('#search').on('keyup',function(){
        $value = $(this).val();
        $qString = getQueryParams('module', window.location.href);
        $queryString =
        $.ajax({
            type: 'get',
            url : '{{URL::to('search')}}',
            data : {'search':$value, 'module_code': $qString},
            // data : {'search':$value},
            success:function (data) {
                //console.log(data);
                // alert(data);
                $('tbody').html(data);
            }
        });
    })

At the last point of the code, it tells the html to print the result at the tag (I'm not sure if this is correct). By removing the attached tbody tag, the problem was solved.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template