JSFiddle - React, Tailwind, and code Playground

by Barry Peterson

HTML

<input type="text" class="search" placeholder="Search Post Titles">
<ul id="post-list"></ul>

JavaScript

const apiRoot = 'https://jsonplaceholder.typicode.com'

class Posts {
	constructor() {
  	this.postListElem = $('#post-list');
    this.searchElem = $('.search');
  }
  
  init() {
  	this.handlers()
  	this.fetchAllPosts()
    	.then(posts => {
      	this.allPosts = posts;
        this.render(this.allPosts);
      });
  }
  
  handlers() {
  	this.searchElem.keyup(e => this.handleSearch(e));
  }
  
  handleSearch(e) {
  	this.render(
    	this.allPosts.filter(post => 
      	post.title.indexOf(e.currentTarget.value) >= 0)
    )
  }
  
  fetchAllPosts() {
 		return $.get(`${apiRoot}/posts`) 	
  }
  
  render(posts) {
  	let postHtml = '';
    
  	posts.map(post => {
    	postHtml = `${postHtml}<li>${post.title}</li>`
    });
    
    this.postListElem.html(postHtml);
  }
}

const posts = new Posts();
posts.init()