JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div id="custom-search-param"></div>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: rgba(245, 245, 245, 1);
  color: rgba(89, 121, 136, 1);
  font-family: arial;
}

div {
  max-width: 600px;
  margin: 5% auto 0;
  padding: 10px;
}

div input {
  padding: 10px;
  display: block;
  width: 100%;
  min-width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 15px;
}

div span {
  padding: 10px;
}

JavaScript

(function($) {
  var cContainer = $('#custom-search-param')
  $(cContainer).append('<input type="text" name="s" placeholder="Suchbegriffe eingeben..."><span></span>')

  $('[name=s]').on('input', function() {
    var cUrl = 'https://germanssky.de/search/',
      cValue = $(this).val(),
      cQuery = '?q=' + sReplace(cValue),
      cHighlight = '&highlight=' + sReplace(cValue)
    $(cContainer).find('span').text(cUrl + cQuery + cHighlight);
  })

  function sReplace(string) {
    string = string.replace(',', '')
    string = string.replace('!', '')
    string = string.replace('?', '')
    string = string.replace('&', '')
    string = string.replace(' ', '+')
    return string;
  }
})(jQuery)