I want to create a simple searcher and I want to be auto responsive without using a button. I want if you write here, it search automatically with that characters.

I want to do the easiest way to create it, nothing complicated or install another items to do it.

I think the hard part is done, but for some reason it gives me the next error:

GET http://webpage.test:8080/inscripcioneswebs/buscador?buscador=A 500 (Internal Server Error)

Any idea?

web.php

Route::resource('inscripcioneswebs', InscripcionesWebController::class);

Route::get('inscripcioneswebs/buscador', 'InscripcionesWebController@buscador');

InscripcionesWebController.php

public function index()
    {
        $inscripcioneswebs = Inscripciones_Web::orderBy('INS_WEB_ID_WP', 'desc')->paginate(10);

        return view('inscripcioneswebs.inscripcioneswebs')->with('inscripcioneswebs', $inscripcioneswebs);
    }

public function buscador(Request $request)
    {
        $buscador = $request->buscador;

        $inscripcioneswebs = Inscripciones_Web::select('INS_WEB_ID')
                    ->where('INS_WEB_ID', 'LIKE', '%' . $buscador . '%')
                    ->paginate(10)
                    ->get();

        return view('inscripcioneswebs.inscripcioneswebs')->with('inscripcioneswebs', $inscripcioneswebs);
    }

incripcioneswebs.blade.php

<div id="inscripcionweb">
    <div>
        <form action="{{ route('inscripcioneswebs.index') }}" method="get">
            <input type="text" name="buscador" id="buscador">
        </form>
    </div>

    <div id="resultados"></div>

    <table >
        @foreach ($inscripcioneswebs as $inscripcionesweb)
            (The table DATA)
        @endforeach
    </table>
</div>

inscripcionweb.js

new Vue({
    el: '#inscripcionweb',

    mounted: function() {
        document.getElementById("buscador").addEventListener("keyup", function() {
            fetch(`/inscripcioneswebs/buscador?buscador=${document.getElementById("buscador").value}`, {
                method: 'get'
            })
            .then(response => response.text())
            .then(html => {
                document.getElementById("resultados").innerHTML  = html
            })
            .catch(error => console.log(error))
        })
    },
});

CodePudding user response：

I think problem in InscripcionesWebController action buscador. You are need delete ->get() after ->paginate(10), because paginate() return collection.

public function buscador(Request $request)
    {
        $buscador = $request->buscador;

        $inscripcioneswebs = Inscripciones_Web::select('INS_WEB_ID')
                    ->where('INS_WEB_ID', 'LIKE', '%' . $buscador . '%')
                    ->paginate(10);

        return view('inscripcioneswebs.inscripcioneswebs')->with('inscripcioneswebs', $inscripcioneswebs);
    }

CodePudding user response：

The problem was solved thanks to the combination of @NicklasKevinFrank and @onovikov answers.

The 500 problem located in /storage/logs/laravel.log told me the problem was Method App\Http\Controllers\InscripcionesWebController::show does not exist. {"userId":3,"exception":"[object] (BadMethodCallException(code: 0): Method App\\Http\\Controllers\\InscripcionesWebController::show does not exist. at C:\\laragon\\www\\atenea2022\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Controller.php:68)

In InscripcionesWebController.php I created a function show and put the same code that function buscador and done!