Javascript Autocomplete Examples

by George Obregon

HTML

<div class="ui-widget">
  <label for="pickup-o">Search: </label>
  <input id="pickup-o">
</div>

JavaScript

$(function() {
  var availableTags = [];
  fetch("https://restaurant-booking-66070.firebaseapp.com/flightsearch/airports.json")
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {

      for (var g = 0, l = data.length; g < l; g++) {
        var feed = data[g];
        var item = {};
        item.label = feed.value;
        item.value = feed.iata;
        var itemRev = {};
        itemRev.value = feed.value;
        itemRev.label = feed.iata;
        availableTags.push(item);
        availableTags.push(itemRev);
      }
      console.log(availableTags);
    })

// VERSION 1
  /*   $("#pickup-o").autocomplete({
      source: availableTags
    }); */
    
//VERSION 2
/*   $("#pickup-o")
    .autocomplete({
      minLength: 0,
      source: availableTags,
      focus: function(event, ui) {
        $("#project").val(ui.item.value);
        return false;
      },
      select: function(event, ui) {
        $("#project").val(ui.item.value);
        $("#project-id").val(ui.item.label);
  
        return false;
      },
      search: function(event, ui) {
        console.log(event);
        console.log(ui)
      }
    })
    .data("autocomplete")._renderItem = function(ul, item) {
      return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + " " + item.value + "</a>")
        .appendTo(ul);
    };
  
   */
});