Autocomplete dynamic changes

xxxxxxxxxx
 
<div class="md-form">
  <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete">
  <button class="mdb-autocomplete-clear">
    <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </svg>
  </button>
  <label for="form-autocomplete" class="active">What is your favorite US state?</label>
</div>
​
<!-- This buttons changes the list of predefined values -->
<button type="button" class="btn btn-primary addBlabla">Add Blabla</button>

​

xxxxxxxxxx
 
var states = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illnois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];
​
$('#form-autocomplete').mdb_autocomplete({
data: states
});
​
$('.addBlabla').click(function(){
  states.length = 0;      /* Reset the array */
  states.push('Blabla');    /* Add this value */
});
​
$('#form-autocomplete').change(function() {
  console.log('Executed on field exit and changed');
});
​
$('#form-autocomplete').bind('input', function(){
  if ($(this).val().length<2) return; /* Do not run on short text */
  console.log('Executed bind');
  states.length = 0;      /* Reset the array */
  states.push('Mexico');    /* Add this value */
  states.push('Moroko');    /* Add this value */
});
​
​

Console errors: 0