s72

    • Filter

    data-filter since 0.1.0

    <input type="search" data-filter="#id"> hides the rows of a table or the items of a list whose text does not hold what was typed. An <output> pointed at the input reads "12 of 40".

    Basic

    3 of 3
    • atlasCap the retry budget at four attempts18
    • ledgerTag 2.4 and write the release note6
    • hummingbirdRevert the queue change that broke the tests11
    html
    <div data-stack>
  <label data-field><span>Filter</span><input type="search" id="repo-filter" data-filter="#repos" placeholder="Repository or message"></label>
  <output for="repo-filter">3 of 3</output>
  <ul data-list id="repos">
    <li><span><strong>atlas</strong><small>Cap the retry budget at four attempts</small></span><mark data-tone="go">18</mark></li>
    <li><span><strong>ledger</strong><small>Tag 2.4 and write the release note</small></span><mark>6</mark></li>
    <li><span><strong>hummingbird</strong><small>Revert the queue change that broke the tests</small></span><mark data-tone="info">11</mark></li>
  </ul>
</div>

    Matching ignores case and looks at the whole row, so typing "queue" finds the message as well as the name.

    Notes