Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

gust's avatar
Level 1

How to begin adding

quiz app,laravel 5.2,mac os, I am trying to add autocomplete with ajax on a search form

    <form class="navbar-form navbar-left"  id="searchForm" method="post" action="{{route('quiz.search')}}">
                {{ csrf_field() }}
               <div class="form-group">
                 <input type="text" id="query" class="form-control" name="query" placeholder="Search">
                 <ul id="results" hidden>

                 </ul>
               </div>
               <button id="searchSubmit" type="submit" class="btn btn-default">Submit</button>
            </form>

I am getting a error POST http://localhost:8000/quiz/search 401 (Unauthorized) with "quiz/search" being the path of the route

Route::post('quiz/search','QuizController@search')->name('quiz.search');

I origininally had my ajax jquery like this

  $("#searchForm").submit(function(e){
            $.ajax({
                type:"POST",
                url:"quiz/search",
                data:$("#searchForm").serialize(),
                success:function(data){
                    console.log(data);

                    $('#results').removeAttr('hidden');

                    for(var key in data){

            $("#results").prepend("<li><a href='{{route('quiz.show',['id' =>" + data[key].id + " ])}}' >" + data[key].title + "</a></li>");
                    }
                }
            });
            return false;
        });

but then I realized I don't want to wait till they click submit to start having auto complete so i changed it to this

           $('#query').on('keyup', function() {
             if (this.value.length > 1) {
                  $.ajax({
                      type:"POST",
                      url:"quiz/search",
                      data:$("#searchForm").serialize(),
                      success:function(data){
                          console.log(data);

                          $('#results').removeAttr('hidden');

                          for(var key in data){

                  $("#results").prepend("<li><a href='{{route('quiz.show',['id' =>" + data[key].id + " ])}}' >" + data[key].title + "</a></li>");
                          }
                      }
                  });
             }
        });

But now it's giving me the error, not sure why

0 likes
1 reply
al0mie's avatar

you need to be auth user if you want to do it. Or send data, that validate that you auth user. Or just remove auth middleware for this route.

Please or to participate in this conversation.