JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<style>
  #col > div {
    display: inline-block;
    vertical-align: top;
    width: 49%;
  }
</style>
<body>
  
<div>
  <input type="text" name="query" id="query" placeholder="Поиск..." autocomplete="off">
  <input type="button" id="btn-clear" value="Очистить">
</div>

<div id="col">

  <div>
    <h4>Список:</h4>
    <ul id="list">
      <li>Статья 1. Москва</li>
      <li>Статья 2. Лондон</li>
      <li>Статья 3. Самара</li>
      <li>Статья 4. Саратов</li>
      <li>Статья 5. Берлин</li>
      <!-- li{Статья $}*10000 -->
    </ul>
  </div>

  <div>
    <h4>Результат:</h4>
    <ul id="result"></ul>
  </div>

</div>

</body>
</html>

JavaScript

$(document).ready(function() {

	var list = $('#list li').toArray();

  $('#btn-clear').on('click', function(e) {
		$('#query').val("");
    $('#result').html('');
  });
  
  $('[name=query]').on('input', function(e) {
		goFind(e.target.value);
	});
  
  function goFind(query) {
  	$('#result').html('');
    if(query == "") return;
    query = query.toUpperCase();
    
    list.forEach(function(text, indx) {
    	if( text.textContent.toUpperCase().includes(query) ) {
      	$('#result').append('<li>'+text.textContent+'</li>');
      }
    });
  };

});