JSFiddle - React, Tailwind, and code Playground

by asdf

HTML

<input type='text' class='js-ac-local' />
<ul class='js-results results'></ul>
<br />
<input type='text' class='js-ac-server' />
<ul class='js-results-server results'></ul>

CSS

input, ul {
  padding: 0;
  margin: 0;
}
.results li {
  border: 1px solid lightgrey;
  border-top-width: 0;
}

.results li:first-child {
  border-top-width: 1px;
}

JavaScript

// Practice task: Implement autocomplete
var countries = [
  {name: 'Australia'},
  {name: 'Austria'},
  {name: 'Argentina'},
  {name: 'Andorra'},
  {name: 'Belgium'}
];

function autocompleteLocal() {
	var val = $(this).val();
	if (!val) {
  	$('.js-results').hide();
  	return; 
  }
  var docFrag = $(document.createDocumentFragment());
  var count = 0;
  for (var i=0; i<countries.length; i++) {
  	if (countries[i].name.indexOf(val) === 0) {
    	docFrag.append('<li>'+countries[i].name+'</li>');
      count++;
    }
  }
  if (count) {
		$('.js-results').html('').append(docFrag).show();
  } else {
  	$('.js-results').html('').append('<li>No results found</li>').show();
  }
  console.log(val);
}
function addAutocomplete() {
  $('.js-ac-local').on('input', autocompleteLocal);
} 
addAutocomplete();

console.log('===============================');

function autocompleteServer() {
	var val = $(this).val();
  var jqxhr = $.ajax({
  	type: 'GET',
  	url: 'http://127.0.0.1:8000/autocomplete',
    contentType: 'application/json',
    data: {q: val}
  });
  jqxhr.done(function (res) {
  	console.log(res);
    var docFrag = $(document.createDocumentFragment());
    var count = 0;
    for (var i=0; i<res.data.length; i++) {
      docFrag.append('<li>'+res.data[i]+'</li>');
      count++;
    }
    if (count) {
      $('.js-results').html('').append(docFrag).show();
    } else {
      $('.js-results').html('').append('<li>No results found</li>').show();
    }
  });
}

function addAutocompleteServer() {
	$('.js-ac-server').on('input', autocompleteServer);
}
// addAutocompleteServer();

// Provide a set of positive integers (an array of integers). Each integer represent number of nights user request on Airbnb.com. If you are a host, you need to design and implement an algorithm to find out the maximum number of nights you can accommodate. The constrain is that you have to reserve at least one day between each request, so that you have time to clean the room. Example: 
//...