JSFiddle - React, Tailwind, and code Playground
HTML
<p class="documentsmenu_search"><input type="text" id="doc_search" placeholder="Search here..."></p>
<ul class="subdoclist doc1 show">
<h2 class="browse_title inner_title" style="display: block;">Contracts for Commercial Activities</h2>
<li class="show"><a target="_blank" href="/legal-contract/8330/#!/" class="doc-link">IP - Content Licensing Agreement</a>
<a target="_blank" href="/legal-contract/8330/#!/" class="doc-link view-but"><img src="http://ch-new.cloudapp.net/wp-content/themes/knowhow/img/viewcontract-icon.svg"></a>
</li>
<li class="show"><a target="_blank" href="/legal-contract/8264/#!/" class="doc-link">IP - End User Licensing Agreement</a>
<a target="_blank" href="/legal-contract/8264/#!/" class="doc-link view-but"><img src="http://ch-new.cloudapp.net/wp-content/themes/knowhow/img/viewcontract-icon.svg"></a>
</li>
<li class="show"><a target="_blank" href="/legal-contract/7594/#!/" class="doc-link">IP - Event Photography Agreement</a>
<a target="_blank" href="/legal-contract/7594/#!/" class="doc-link view-but"><img src="http://ch-new.cloudapp.net/wp-content/themes/knowhow/img/viewcontract-icon.svg"></a>
</li>
<li class="show"><a target="_blank" href="/legal-contract/7571/#!/" class="doc-link">IP - Intellectual Property Transfer Agreement</a>
<a target="_blank" href="/legal-contract/7571/#!/" class="doc-link view-but"><img src="http://ch-new.cloudapp.net/wp-content/themes/knowhow/img/viewcontract-icon.svg"></a>
</li>
<li class="show"><a target="_blank" href="/legal-contract/13/#!/" class="doc-link">NDA - Confidentiality Agreements - Non-Disclosure Agreements</a>
<a target="_blank" href="/legal-contract/13/#!/" class="doc-link view-but"><img src="http://ch-new.cloudapp.net/wp-content/themes/knowhow/img/viewcontract-icon.svg"></a>
</li>
</ul>
CSS
img{
display: none;
}
.show{
display: block;
}
li{
display: none;
}
JavaScript
$('#doc_search').on('keyup', function() {
var inputtext = $(this).val().toLowerCase();
$('.subdoclist li a').each(function() {
if (inputtext == '') {
$('.subdoclist li').each(function() {
$(this).addClass('show');
});
console.log(inputtext);
} else if ($(this).text().toLowerCase() === inputtext) {
$('.subdoclist li').removeClass('show');
$(this).parent().addClass('show');
console.log(inputtext);
}
});
})