JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<h1>
  Eingabe Autocomplete-Suchschlitz pixeln
</h1>

<input>
<p>
  [Auswahlliste ändert sich entsprechend Eingabe, hier nicht dargestellt]</p>

<table border=1>
  <thead>
    <tr>
      <td>Eingabe</td>
      <td id="ml">Mindestlänge</td>
      <td>Substring</td>
      <td>&ne; vorheriger Substring</td>
      <td>Aktion</td>

    </tr>
  </thead>
  <tbody>




  </tbody>
</table>

CSS

.pixeltrue {
  background: springgreen;
}

thead {
  font-weight: bold;
}

input {
  margin-bottom: 6px;
  font-size: 12pt;
}

JavaScript

var prev = "";
var zeichenlaenge = 3;
$("#ml").append(" (" + zeichenlaenge + ")")

$("input").keyup(function() {

  var v = $(this).val().trim();

  var allowPageImpression = (v.length >= zeichenlaenge) && (v.substr(0, zeichenlaenge).toLowerCase() !== prev.substr(0, zeichenlaenge).toLowerCase());

  $("tbody").prepend($("<tr>").addClass("pixel" + allowPageImpression).html("<td>" + v + "</td><td>" + (v.length >= zeichenlaenge) + "</td><td>" + v.substr(0, zeichenlaenge).toLowerCase() + "</td><td>" + (v.substr(0, zeichenlaenge).toLowerCase() !== prev.substr(0, zeichenlaenge).toLowerCase()) + "</td><td>" + (allowPageImpression ? "PI absetzen" : "") + "</td>"));

  if (v.length >= zeichenlaenge) {
    prev = v;
  }

});