add modal popup from ajax fetched results

im struggling to achieve this because my javascript knowledge is not that good.

So what im trying to do is this: I'm building a borrowing book laravel app and i have a landing page that has a search box and a search button. When someone starts typing a query an auto-complete suggestion is triggered and a drop-down of book titles is available to choose from. The problem is that i cant use the search result to show any book details in a popup modal.

route:

Route::get('autocomplete', 'App\Http\Controllers\WelcomeController@search');

method in my controller:

public function search(Request $request)
    {
          $search = $request->get('term');

          $result = Book::where('title', 'LIKE', '%'. $search. '%')->get();


          return response()->json($result);

    }

_searchbox.blade.php :

   <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
                    <form method="">
                        <div class="form-row">
                            <div class="col-12 col-md-9 mb-2 mb-md-0">
                                <input id="search"  "type="text" class="form-control form-control-lg" name="search"
                                    placeholder="Search for...">

                            </div>

                            <div class="col-12 col-md-3">
                                <button type="button" name="searchButton" id="searchButton" class="btn btn-block btn-lg btn-primary" ><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>

script for fetching the results :

$(document).ready(function() {
       $( "#search" ).autocomplete({

           source: function(request, response) {
               $.ajax({
               url: "{{url('autocomplete')}}",
               data: {
                       term : request.term
                },
               dataType: "json",
               success: function(data){
                  var resp = $.map(data,function(obj){
                      // console.log(obj.city_name);
                       return obj.title;
                  });

                  response(resp);
               }
           });
       },
       minLength: 1
    });

i followed this tutorial : https://w3path.com/jquery-ui-autocomplete-search-in-laravel-6-tutorial/

Can someone help me with that?