Adding an AJAX Live Search Function - Part 1 - Adding a Search Form

This post describes how to dynamically search for members of the tennis club by typing a member's name into the search box. On each keyup event the search will be refined to match any members whose name approximates the value typed into the search field.

AJAX stands for Asynchronous Javascript And XML. This is a way of passing data to a webserver without actually submitting a form. Rather than waiting for the click of a submit button the programmer can capture a range javascript events and allow the associated code to pass data to the webserver. In this example we will use the onkeyup event which gets fired every time the user types any key and then releases it. This will allow us to refine the results of the search as the user types the information the way the google search bar does.

To begin with we need a web page with a simple search form along with a table which will act as a placeholder for the search results. Save the following code to a file called /resources/views/members/searchform

@extends('layouts.app')
@section('content')
<div class="container-fluid">
    <div class="form-group">
        <input type="text" class="form-control" id="search" name="search">      </input>
    </div>
    <div class="table-responsive-sm">  
      <table class="table">  
        <thead>
            <tr>
                <th>ID</th>
                <th>Firstname</th>
                <th>Surname</th>
                <th>Membertype</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
</div>
@endsection

To bring up this form we will need an appropriate route. Add the following route to /routes/web.php

Route::get('member/searchform', 'App\Http\Controllers\MemberController@searchform')->name('member.searchform');

To make the form react when a user starts typing into the search box (specifically when the user releases a key) we need to add some jquery code which will react when a key is released. Add the following code snippet just before the @endsection directive at the bottom of the /resources/views/members/searchform page

<script type="text/javascript">
$('#search').on('keyup',function(){
    $value=$(this).val();
    $.ajax({
        type : 'get',
        url : '{{route('member.search')}}',
        data:{'search':$value},
        success:function(data){
            $('tbody').html(data);
        }
    });
})
</script>
<script type="text/javascript">
    $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>

Now when you visit http://localhost:8000/member/searchform you see a form where you can search for members by surname. This last bit of jquery code will fire when a key is pressed and released in the search box. At that point, the value entered in the box will be retrieved and passed in a get request to the route member.search. Up to this point, there is no such route so if you type into the search box you will get an error which you will see in the console tab of the browser developer tools section. To get the form to display search results we need to add a route and controller function for the route in the ajax script (member.search). We'll sort this out in the next post.