JSFiddle - React, Tailwind, and code Playground

HTML

<br><div>Выпадающие сиськи (нечувствительны к РеГистРу)</div><br>
<div class=body>
  <input type=text value="волосатые">
  <div class=array>&#9660;</div>
</div>
<div id=list></div>

CSS

div, input{ /* normalize css */
  padding: 0; margin: 0; top: 0; left: 0;
  border: none;
  font-family: Arial; font-size: 14px; line-height: 0;
  color: rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
}

.body{
  width: 258px; height: 50px; padding: 1px;
  /**/
  box-shadow: 1px 0 rgba(0, 0, 0, 0.15),
              0 1px rgba(0, 0, 0, 0.15),
              -1px 0 rgba(0, 0, 0, 0.15),
              0 -1px rgba(0, 0, 0, 0.15);
  border-radius: 2px; /* не работает с border и outline */
}

input{
  width: 208px; height: 48px; padding-left: 16px;
}

.array{
  width: 48px; height: 48px; float: right;
  text-align: center; line-height: 48px;
  background: rgba(255, 255, 255, 0.9); color: rgba(0, 0, 0, 0.5);
  box-shadow: 1px 0 rgba(0, 0, 0, 0.1) inset;
  cursor: pointer;
} .array:hover{
  background: rgba(255, 255, 255, 0.5);
  color: inherit;
}

/**/

#list{
  width: 256px; height: auto; max-height: 240px; 
  margin: 2px 0 0 1px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-x: hidden; overflow-y: auto;
}

.list{
  width: 100%; height: 48px;
  padding: 0 8px 0 16px;
  box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
  line-height: 48px;
  overflow: hidden; cursor: pointer;
} .list:hover{
  background: rgba(0, 0, 0, 0.05); 
  box-shadow: 0 -1px rgba(0, 0, 0, 0.15) inset;
}

/* скроем стандартную стрелку */
input::-webkit-calendar-picker-indicator {
	display: none;
}

JavaScript

var a = ['плоские', 'Маленькие', 'срЕДние', 'большие', 'подтянутые', 'обвисшие', 'с маленькими сосками', 'с болЬшими сосками', 'гладкие', 'с пупырышками', 'чувствительные', 'нечувствительные'];
var b = []; var c = [];
var i = 0; // i для turn
$('#list').hide(); // скрываем список

$.each(a, function(i){	// формируем список в div
	var lwrList = a[i].toLowerCase(); // массив в нижний регистр
  b[i] = '<div class="list" id="'+lwrList+'">'+lwrList+'</div>';
  /* id делает уникальным каждый блок при клике
  и будет использоваться в поиске совпадений */
});
$('#list').html(b); // помещаем весь массив в родительский div

$('input').focus(function(){
	reset(); checking();
}); // очищаем input для новых значений при каждом клике

function checking(){
  $('.list').click(function(){
    $('input').val($(this).html());
    turnUp();
  });
}; checking();

function reset(){
	$('input').val('');
  $('#list').html(b);
};

// сворачивание
function turnUp(){
	$('.array').html('&#9660;');
  $('#list').slideUp(200);
  i = 0;
};
function turnDown(){
  $('.array').html('&#9650;');
  $('#list').slideDown(200);
  i = 1;
};

$('.array').click(function(){
	if(i==0){
		turnDown();
  } else {
  	turnUp();
  };
});

// поиск совпадений
function search(){
	turnDown();
	setTimeout(function(){
  // для регистра
  var lwrSrch = $('input').val().toLowerCase();
	if($('[id*="'+lwrSrch+'"]')[0] != null){
  	$('[id*="'+lwrSrch+'"]').each(function(i){
    	c[i] = 	'<div class="list" id="'+$(this).attr('id')+
              '">'+$(this).attr('id')+'</div>';
      i++;
    });
    $('#list').html(c);
    c = []; checking();
  } else {
  	if($('input').val() != ''){
    	$('#list').html('');
    	checking(); 
    } else {
    	reset(); checking();
    };
  };
  }, 50); // ожидание во избежание ошибок
};

$('input').keyup(function(eventObject){
  if(eventObject.key == 'Shift' || 
  	eventObject.key == 'Control') {
  	return false
  } else {
  	search();
  };
  // keypress не определяется смартфонами,...