[MC-XOBAHCK]

Хочу сделать фильтр он же поиск элементов на странице (не знаю как правильно это назвать).
Похожий пример того что мне нужно - карта в учебнике этого сайта https://learn.javascript.ru/?map , где при вводе поискового значения несоответствующие пункты исчезают, а остаются те у которых есть совпадение.

Нужно чтобы при вводе в input из списка скрывались несоответствующие поиску пункты.
HTML:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Поиск">
<div class="row">
	<div class="col-4"><span class="list"><i class="fa fa-home"></i>Солнце</span></div>
	<div class="col-4"><span class="list"><i class="fa fa-newspaper-o"></i>Вилка</span></div>
	<div class="col-4"><span class="list"><i class="fa fa-home"></i>Кран</span></div>
	<div class="col-4"><span class="list"><i class="fa fa-home"></i>Соль</span></div>
	<div class="col-4"><span class="list"><i class="fa fa-newspaper-o"></i>Пакет</span></div>
	<div class="col-4"><span class="list"><i class="fa fa-tags"></i>Аквариум</span></div>
	<div class="col-4"><span class="list"><i class="fa fa-newspaper-o"></i>Велосипед</span></div>
	<div class="col-4"><span class="list"><i class="fa fa-home"></i>Крыло</span></div>
	<div class="col-4"><span class="list"><i class="fa fa-tags"></i>Кастрюля</span></div>
</div>

Подключена jQuery-3.2.1
Со скриптом у меня проблема, что-то не то делаю - нужна помощь

function myFunction() {
	var input, filter, list, li, i, a;
	input = $('#myInput');
	filter = input.val().toUpperCase();
	list = $('.list');

       //Массив из list
       var li = list.map(function(){
         return $(this).text();
       }).get();

	console.log(li);

	for (var i = 0; i < li.length; i++) {
		a = li[i];
		if(a.val().toUpperCase().index(filter) > -1) {
			li[i].show();
		} else{
			li[i].hide();
		}
	}
}