JSFiddle - React, Tailwind, and code Playground

by maxell4o

HTML

<input type="text" id="input">
  <ul></ul>

JavaScript 1.7

//// library.js
function MyLibrary() {
  this.element = null;
  this.params = {};
  this.items = [];
}

MyLibrary.prototype.renderList = function(items) {
  var value = this.element.value;
  var _items = [];
  for (var item of this.items) {
    if (item.name.toLowerCase().indexOf(value.toLowerCase()) > -1) {
      _items.push(item);
    }
  }
  this.render(_items);
}

MyLibrary.prototype.render = function(filteredItems) {
  var ul = document.querySelector('ul');
  ul.classList.add('list');
  ul.innerHTML = '';

  if (filteredItems.length > 0) {
    for (var city of filteredItems) {
      var li = document.createElement('li');
      li.innerHTML = '<strong>' + city.name + '</strong>';
      ul.append(li);
    }
  } else {
    var li = document.createElement('li');
    li.innerHTML = '<strong>Няма резултат</strong>';
    ul.append(li);
  }
}

MyLibrary.prototype.onChange = function(e) {
  this.renderList();
}

MyLibrary.prototype.attachEvents = function() {
  this.element.addEventListener('input', this.onChange.bind(this))
}

MyLibrary.prototype.fetchData = function() {
  // Ajax load file
  var items = [{
    name: 'Varna'
  }, {
    name: 'Sofia'
  }, {
    name: 'Plovdiv'
  }];
  this.items = items;
  this.renderList();
}

MyLibrary.prototype.init = function(input, params) {
  this.element = input;
  this.params = params;
  this.attachEvents();
  this.fetchData();
}

////////////////////////////

/* index.html */

var instance = new MyLibrary();

const input = document.querySelector('#input')
instance.init(
  input, {
    suggestionsLimit: 5,
    file: 'data.json'
  }
);