HTML5 Datalist not working

Hey Guys, I am trying to use a datalist to give users suggestions when they complete a form, however, it does not seem to work:

@extends('layouts.app')
@section('content')
	<div class="container my-3">
		<div class="row justify-content-center">
			<div class="col-md-8">
				<div class="card">
					<div class="card-header">Register for an account</div>
					<div class="card-body">
						<div class="alert alert-info">
							<p>Before you can use our website to book events you must create an account. Registration is
								free
								and can be done by completing the form below.</p>
							<p>Once your account has been setup, you may apply for a "Club" account to book events and
								manage
								club subscriptions.</p>
							<p>If you are a parent, please use your name and contact details here. You will be able to
								add
								children into your bookings separately.</p>
						</div>
						<form method="POST" action="{{ route('register') }}">
							@csrf
							<div class="form-group row">
								<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

								<div class="col-md-6">
									<input id="name" type="text"
									       class="form-control @error('name') is-invalid @enderror" name="name"
									       value="{{ old('name') }}" required autocomplete="name" autofocus>

									@error('name')
									<span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
									@enderror
								</div>
							</div>

							<div class="form-group row">
								<label for="email"
								       class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

								<div class="col-md-6">
									<input id="email" type="email"
									       class="form-control @error('email') is-invalid @enderror" name="email"
									       value="{{ old('email') }}" required autocomplete="email">

									@error('email')
									<span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
									@enderror
								</div>
							</div>

							<div class="form-group row">
								<label for="name" class="col-md-4 col-form-label text-md-right">Contact Number</label>

								<div class="col-md-6">
									<input id="name" type="text"
									       class="form-control @error('contact_number') is-invalid @enderror"
									       name="contact_number"
									       value="{{ old('contact_number') }}" required autocomplete="contact_number"
									       autofocus>

									@error('contact_number')
									<span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
									@enderror
								</div>
							</div>

							<div class="form-group row">
								<label for="club" class="col-md-4 col-form-label text-md-right">Club</label>

								<div class="col-md-6">
									<input
								        class="form-control @error('club') is-invalid @enderror"
								        name="club"
								        list="club_list"
								        autocomplete="off"
						            >

									<small>Start typing the name of your club, if it is already in our system, it will
										appear in the suggestions list below. If not, please try the full correct name
										for the club
										and we will add this club to our database.</small>
									<datalist id="club_list">
										<option value="test">Test</option>
									@foreach($clubs as $club)
										<option value="{{ $club->name }}">{{ $club->name }}</option>
									@endforeach
									</datalist>

									@error('club')
									<span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
									@enderror
								</div>
							</div>

							<div class="form-group row">
								<label for="password"
								       class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

								<div class="col-md-6">
									<input id="password" type="password"
									       class="form-control @error('password') is-invalid @enderror" name="password"
									       required autocomplete="new-password">

									@error('password')
									<span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
									@enderror
								</div>
							</div>

							<div class="form-group row">
								<label for="password-confirm"
								       class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

								<div class="col-md-6">
									<input id="password-confirm" type="password" class="form-control"
									       name="password_confirmation" required autocomplete="new-password">
								</div>
							</div>

							<div class="form-group row mb-0">
								<div class="col-md-6 offset-md-4">
									<button type="submit" class="btn btn-primary">
										{{ __('Register') }}
									</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

This is essentially just a modified register.blade.php form. The datalist is being populated correctly. I just cannot work out where I am going wrong.

The form just shows the browser saved password prompts :/

Cheers Guys, Andrew