JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<input type="text" id="search">

<ul id="results">

</ul>


<script>window.YLOPO_WIDGETS = { domain: "search.scoutrealty.com" };</script>

<div class="YLOPO_searchWidget"></div>

<script async="" src="https://search.scoutrealty.com/build/js/widgets-1.0.0.js"></script>

JavaScript

var url = 'https://portal.ylopo.com/api/1.0/autocomplete?partyWebsite=search.scoutrealty.com&callback=?&searchTerm=';

var generateUrl = (query) => {

}

var types = [
  'subdivision',
  'neighborhood',
  'school',
  'city',
  'postalCode',
];


$('#search').on('change', (e) => {
  var url = generateUrl(e.target.value);

  $.getJSON(url, updateForm);
});

var $results = $('#results');

var updateForm = (data) => {

  var list = {};


  $.each(types, (key, type) => {
    list[type] = filterByType(data, type)
  });


  var html = $.map(list, (items, type) => {

    var html = [
      '<li>' + type + '</li>',
      '<ul>',
    ];

    var items = $.map(items, (result) => {
      return '<li>' + result.longLabel + '</li>';
    }).slice(0, 5).join('');

    html.push(items);

    html.push('</ul>');

    return html.join('');

  });
  
  $results.html(html.join(''));

}

var filterByType = (list, type) => {
  return list.filter((value) => {

    return value.type == type;
  });
}



var generateUrl = (string) => {
  return url + string;

}