javascript — функция автозаполнения не работает

Я застрял в своем коде, мне нужно выполнить автозаполнение для Штатов.
Я уже поставил библиотеки скриптов, и ошибки консоли не было обнаружено.
так что я могу сделать. любое предложение.

Это мой код:
Jquery:

$('document').ready(function(){
var states = [
"Alabana",
"Alaska",
"Arizona",
"Arkansas",
"California"];

$('.mdb-autocomplete').autocomplete({
source:states
});
});

HTML:

<form method="post" name="quickmsg" id="quickmsg">
<!-- Modal Subscription -->
<div class="modal fade modal-ext" id="modal-subscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">MessageBox </h4>
</div>
<!--Body-->
<div class="modal-body">
<p></p>
<br>
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="search" id="form22" name="State" class="form-control mdb-autocomplete">
<label for="form22">State name</label>
</div>

<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form32" name="Message" class="form-control">
<label for="form32">Your Message</label>
</div>

<div class="text-xs-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
</form>

Спасибо !!!