ES6 - SEARCHBAR

by Rodwyn Moreno

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<form role="search" aria-label="site" class="search-form">
  <div class="search-wrapper">
    <input type="search" class="search-form-input" placeholder="Search" />
    <button type="submit">
      <i class="fa fa-search"></i>
    </button>  
  </div>
</form>

CSS

* {
  font-family: sans-serif;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.search-form {
  background-color: rgba(0,0,0, .6);
  padding: 8px;
  position: relative;
}

.search-wrapper {
  display: flex;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  background: #808080;
  width: calc(100% - 16px);
  left: 8px;
}

.search-form-input {
  border: 3px solid #1a1a1a;
  border-right: none;
  flex: 1;
  background-color: #f2f2f2;
  color: #262626;
}

.search-form-input::placeholder {
  color: #262626;
}

.search-form button {
  background-color: #1a1a1a;
  border: 3px solid #1a1a1a;
  color: #fff;
  cursor: pointer;
}

.search-results li a {
  text-decoration: none;
  color: #262626;
  margin-bottom: 4px;
  display: block;
}

.search-results li a:hover {
  color: #fff;
}

JavaScript

class SearchBar {
	constructor(element) { 
  	this.element = element;
    this.endpointURL = 'https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=20&srsearch=';
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fetchResult = this.fetchResult.bind(this);
    element.addEventListener('submit', this.handleSubmit);
  }
	
  handleSubmit(event) {
    event.preventDefault();
    const searchQuery = this.element.querySelector('.search-form-input').value.trim();
    this.fetchResult(searchQuery);
  }
  
  fetchResult(searchQuery) {
    fetch(this.endpointURL+searchQuery).then(
    	response => response.json()
    ).then(
    	data => {
        const results = data.query.search;
        this.renderResults(results);
      }
    );
  }

  removePreviousResult() {
  	const resultsContainer = this.element.querySelector('.search-results');

    if (resultsContainer) {
    	this.element.removeChild(resultsContainer);
    }
  }

  renderResults(results) {
  	this.removePreviousResult();
  	
  	const resultsContainer = document.createElement('ul');
    
    resultsContainer.setAttribute('class', 'search-results');
    
    if (results.length) {
    	results.forEach(result => {
        const url = encodeURI(`https://en.wikipedia.org/wiki/${result.title}`);

        resultsContainer.insertAdjacentHTML('beforeend',
        `<li>
          <a href="${url}" target="_blank">${result.title}</a>
         </li>`
        );
      });
    } else {
			resultsContainer.insertAdjacentHTML('beforeend',
        `<li>
          <a href="#">No results</a>
         </li>`
        );
    }
    
    this.element.appendChild(resultsContainer);
  }
}

const searchBarElement = document.querySelector('.search-form');
new SearchBar(searchBarElement);