Breaking News: Grepper is joining You.com. Read the official announcement!

laravel 8 ajax search input

Mohamed Elorabi answered on December 28, 2022 Popularity 9/10 Helpfulness 1/10

answer laravel 8 ajax search input

laravel 8 ajax search input

Comment

-1

<!DOCTYPE html>
<html>
<head>
    <title>Laravel JQuery UI Autocomplete Search Example - ItSolutionStuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
     
<div class="container">
    <h1>Laravel JQuery UI Autocomplete Search Example - ItSolutionStuff.com</h1>   
    <input class="typeahead form-control" id="search" type="text">
</div>
     
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
  
    $( "#search" ).autocomplete({
        source: function( request, response ) {
          $.ajax({
            url: path,
            type: 'GET',
            dataType: "json",
            data: {
               search: request.term
            },
            success: function( data ) {
               response( data );
            }
          });
        },
        select: function (event, ui) {
           $('#search').val(ui.item.label);
           console.log(ui.item); 
           return false;
        }
      });
  
</script>
     
</body>
</html>

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: www.itsolutionstuff.com

Tags: ajax input javascript laravel-8 search

Link to this answer
Share Copy Link

Contributed on Dec 28 2022

Mohamed Elorabi

0 Answers Avg Quality 2/10

laravel 8 ajax search input

Contents

More Related Answers

laravel 8 ajax search input

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.