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>

Definition auf der Cognos-Promptpage
Definition der Element auf der Prompt-Page

Standardsuche nach allen Vorkommen eines Suchbegriffs
Filtereingabe für eine Listbox

Suche nach Texten, die auf 73 enden ($ am Ende des Suchtextes)
Filtereingabe für eine Listbox mit RegEx $

Suche nach Texten, die mit B beginnen (^ am Anfang des Suchtextes)
Filtereingabe für eine Listbox mit RegEx ^

Free Joomla templates by L.THEME

Wir benutzen Cookies
Durch Nutzung dieser Website stimmen Sie der Verwendung von Cookies für Analysen, personalisierte Inhalte und Werbung zu. Weitere Informationen über Cookies finden Sie in unserer Datenschutzerklärung.