JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="form-control empty" name="keyword" id="pickup" placeholder="&#xf041;"/>
<div id="results">
</div>

JavaScript

/////Using dummy data for populate


var dummyData='';
dummyData +='<a style="cursor:pointer">key1</a><br />';
dummyData +='<a style="cursor:pointer">key2</a><br />';
dummyData +='<a style="cursor:pointer">key3</a><br />';
dummyData +='<a style="cursor:pointer">key4</a><br />';
dummyData +='<a style="cursor:pointer">key5</a><br />';
dummyData +='<a style="cursor:pointer">key6</a><br />';

    
    $("#pickup").on('focus',function () {
        var key = $(this).val();
                
                $("#results").html(dummyData);
                
                
                /////New block added
                /////checking exact text
                /////then removing others
                /////also removing br tags to remove extra space
                
                $("#results a").each(function(index){                
                  if($(this).html()==key){
                    $(this).addClass('active');
                    $("#results a:not(.active)").remove();
                    $("#results br").remove();
                  }                
                });
                
                
                //////Rest code is same as yours
                
                $("#results").slideDown('fast');
                // use `on` as elements are added dynamically
                $( "#results" ).on("click", "a", function() {
                // take `text` of a clicked element and set it as `#pickup` value
                 $( "#pickup" ).val( $( this ).text() );
                $("#results").slideUp('fast');

              return false;
                });
    });