Einfache Suchbox für Auswahllisten

: Snippets Cognos 10

Einfache Suchbox für Auswahllisten

Mit JavaScript eine Suchbox für Auswahllisten erstellen

Die Auswahlboxen auf Cognos Eingabeaufforderungsseiten sind nicht sehr interaktiv. Das "Suche-Element" von Cognos ist allerdings sehr unhandlich und verursacht bei jeder Suche neue Datenbankabfragen.

Daher ist ein kleines Eingabefeld, um eine Auswahlliste schnell und einfach zu filtern, sehr praktisch.

Vor einer normalen Auswahlliste wird mit etwas HTML-Code ein Eingabefeld hinzugefügt. Und mit etwas JS-Code kann man dann die Auswahlliste filtern. Hierbei funktionieren auch Regular Expressions (z.B. mit ^ nach einem Text am Anfang oder mit $ am Ende suchen).

Vor dem Listenelement ein HTML-Element mit folgender Code-Zeile einfügen

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

Direkt nach dem Listenelement ein HTML-Element mit diesem Code-Snippet einfügen

<script>
  var elem = findControl("P_LST_KUNDE1")
  var options = elem.options
  var clientids = [];
  var clientnames = [];
  var clientelems = [];
  for (let x = 0, x_len = options.length; x < x_len; x++) {
    if (options[x].getAttribute("dv") != null) {
      clientids.push(options[x].value);
      clientnames.push(options[x].getAttribute("dv"));
      clientelems.push(options[x]);
    }
  }
  document.getElementById("client_search_field").addEventListener("input", function (evt) {
    findControl("P_LST_KUNDE1").value = "";
    clientelems.forEach(elem => elem.style.display = "none");
    clientelems.filter(function (elem, search) {
      var exp = new RegExp(this.toUpperCase().replace(/ /g, ".*"));
      if (elem.getAttribute("dv").toUpperCase().match(exp)) {
        elem.style.display = "";
        return true;
      } else {
        return false;
      }
    }, evt.target.value)
  });
</script>