JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="string" style="display:none;">
  <system-data-structure>
    <staff-listing>
      <section>1</section>
      <abbr>AK</abbr>
      <name>Anna</name>
    </staff-listing>
    <staff-listing>
      <section>1</section>
      <abbr>KW</abbr>
      <name>Bernd</name>
    </staff-listing>
  </system-data-structure>
</textarea>

<input id="searchField" placeholder="Name"/>
<ul id="resultList"></ul>

JavaScript

"use strict";

  var string = document.getElementById("string").value;
  var parser = new DOMParser();
  var data = parser.parseFromString(string,"application/xml");
  var searchField = document.getElementById("searchField");
  var resultList = document.getElementById("resultList");

  function searchByName(term){
    return Array.from(
      data.documentElement.children
    ).filter(
      element => !term
              || element.getElementsByTagName("name")[0]
                   .textContent.toLowerCase()
                   .indexOf(term.toLowerCase()) != -1
    );
  }

  class SearchResultElement {
    constructor(staffListing){
      this.name = staffListing.getElementsByTagName("name")[0].textContent;
      this.abbr = staffListing.getElementsByTagName("abbr")[0].textContent;
      this.section = staffListing.getElementsByTagName("section")[0].textContent;
      this.root = document.createElement("li");
      this.update();
    }
    update(){
      this.root.innerHTML = '';
      this.root.appendChild(
        document.createTextNode(
          this.name+', '+this.abbr+', section '+this.section
        )
      );
    }
    getRoot(){
      return this.root;
    }
  }

  function update(){
    var results = searchByName(searchField.value);
    resultList.innerHTML = '';
    for( var result of results ){
      var element = new SearchResultElement(result);
      resultList.appendChild(element.getRoot());
    }
  }

  searchField.oninput = update;
  update();