​

var order = "A-Z";

​

const asyncAutocomplete = document.querySelector('#async');

​

const asyncFilter = async (query) => {

  const url = `https://swapi.py4e.com/api/people/?search=${encodeURI(query)}`;

  const response = await fetch(url);

  const data = await response.json();

  var res = data.results;

  //Order data by AZ or ZA, according to selection

  res.sort( function( a, b ) {

    if(order == "A-Z")

      return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;

    else if(order == "Z-A")

      return b.name < a.name ? -1 : b.name > a.name ? 1 : 0;

  });

  //Return data

  return res;

};

​

//Initialise the autocomplete

var AutoCompleteObject = new mdb.Autocomplete(asyncAutocomplete, {

  filter: asyncFilter,

  displayValue: (value) => value.name

});

​

/* Order for dropdown - on order selection (or perhaps filter in other cases),

* we have to re-request the data again, and then force a focus on the textfield to see a change

* in results. But often we have already loaded all the data and it simply needs to be reordered

* (or filtered). */

var divs = document.querySelectorAll('.dropdown-item'), i;

for (i = 0; i < divs.length; ++i) {

  divs[i].addEventListener("click",function(){

    order = this.dataset.order;

    document.getElementById("dropdownMenuButton").innerHTML = order;     

    //Re-request the data again in order to prompt the autocomplete system to function as desired

    //but this means another ajax request

    AutoCompleteObject = new mdb.Autocomplete(asyncAutocomplete, {

      filter: asyncFilter,

      displayValue: (value) => value.name

    });

    //we also refocus on it to see the list

    document.getElementById('autocompletetext').focus();

  });

}