JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list-item">

<li ><a>1</a></li>
<li ><a>2</a></li>
</ul>
<input id="search_input" type="text" value="xxx">

JavaScript

var searchString = $('#search_input').val();
 
        $('#search_input').on('input', function() {
            $('#search_result').empty();
            
            if ( this.value == '' ) {                                                              // Якщо пошуковий запит порожній - показуємо список елементів
                
            } else {
                var searchResult = [];                                                              // Масив для результату пошуку
                
                $('#list-item').find('a').each(function() {                              // Перебираємо кожен елемент списку
          // Чому не видно searchString, воно ж наче глобальна.
          console.log(searchString);
                    if ($(this).text().search(searchString) != -1)  // Якщо елемент містить в собі слово запиту
                        searchResult.push($(this));                                                // Додаємо знайдені елменти в масив
                });
 
                $(searchResult).each(function() {
                    pattern = new RegExp($('#search_input').val());
                    var itemName = $(this).html().replace(pattern, '<b>'+ $('#search_input').val() +'</b>');
                    // console.log(itemName);
                    $('#search_result').append($('<a>').attr('href', $(this).attr('href')).text(itemName));
//                    $('#search_result').append($(this));                                  // Чому так не працює?
                });
    
                console.log(searchResult);
            }
        });