Auto update Slug field value based on specific function in Laravel

I'm building a blog system using Laravel 6, I 'v a function to generate a unique Slug.

What I want to do is a field in create post form, this field will be updated automatically while I type on the title field.

I want to generate the Slug field value from the Slug Function while typing on title field.

So is there any way to do this using jQuery or something else?

Slug Function

public function slug($string, $separator = '-') {
    if (is_null($string)) {
        return "";
    }

    $string = trim($string);

    $string = mb_strtolower($string, "UTF-8");

    $string = preg_replace("/[^a-z0-9_\sءاأإآؤئبتثجحخدذرزسشصضطظعغفقكلمنهويةى]#u/", "", $string);

    $string = preg_replace("/[\s-]+/", " ", $string);

    $string = preg_replace("/[\s_]/", $separator, $string);

    return $string;
}

Store Method

public function store(Request $request)
{
    $this->validate($request, array(
        'title'         => 'required|max:255',
        'body'          => 'required',
    ));
    $post = new Post;
    $post->title = $request->input('title');
    $post->body = $request->input('body');

    $post->save();

    return redirect('admin/posts')->with('success', 'post is successfully saved');
}

View

    <form action="" method="post">
    @csrf
    <div class="row gutters-tiny">
                    <div class="col-md-7">
                            <div class="block block-rounded block-themed">
                                <div class="block-header bg-gd-primary">
                                    <div class="block-options">
                                        <button type="submit" class="btn btn-sm btn-alt-primary">
                                            <i class="fa fa-save mr-5"></i> Save
                                        </button>
                                    </div>
                                </div>
                                <div class="block-content block-content-full">
                                    <div class="form-group row">
                                        <label class="col-12" for="ecom-product-name">Title</label>
                                        <div class="col-12">
                                            <input type="text" class="form-control" id="title" name="title"  value="">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-12">Body</label>
                                        <div class="col-12">
                                            <textarea class="form-control" id="body" name="body" rows="8"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                    </div>
                    </form>

via Chebli Mohamed