countries

by Alexander Pankov

HTML

<div class="wrapper">
    <div calss="panel">Введите название страны
        <input type="text" id="name" placeholder="Введите название страны" />
        <button id="hide_show">Показать\скрыть список</button>
    </div>
    <ul class="countries"></ul>
</div>

CSS

.wrapper{
	width: 800px;
	margin: 0 auto;
	font-size: 20px;
}
.panel{
	margin-top: 30px;
	margin-bottom: 30px;
}
input[type="text"]{
	width: 250px;
	height: 20px;
	margin-left: 20px;
	margin-right: 15px;
	font-size: 16px;
}
#hide_show{
	background-color: #fff;
	border: 1px solid #ccc;
	font-size: 16px;
	font-family: serif;
	padding: 3px;
}
#hide_show:hover{
	cursor: pointer;
}
.countries{
	width: 600px;
	height: 220px;
	margin: 0 auto;
	border: 1px solid #ccc;
	overflow-y: scroll;	
}

JavaScript

< script > addAll();

	var input = document.getElementById('name');
	var ul = document.getElementsByClassName('countries')[0];
	var li = ul.children;
	var bt = document.getElementById('hide_show');


	input.onkeyup = function (event) {
	    event = event || window.event;
	    if (input.value.length == 0) {
	        addAll();
	    } else {
	        var result = search(input.value);
	        if ((result === undefined) || (result.length < 1)) {
	            notFound();
	        } else {
	            removeChildren(ul);
	            for (var i = 0; i < result.length; i++) {
	                var item = document.createElement('li');
	                item.innerHTML = result[i].innerHTML;
	                //подсветить в результате то, что совпадает с введенным значением НУЖНО ТОЛЬКО ПЕРВЫЕ БУКВЫ!!!
	                ul.appendChild(item);
	            };
	        }
	    }
	};

	function search(text) {
	    var mas_li = [];
	    //поиск нужно возобновлять снова по всему списку (список хранится в 'li')
	    for (var i = 0; i < li.length; i++) {
	        if (li[i].innerHTML.indexOf(text) != -1) {
	            mas_li.push(li[i]);
	        };
	    };
	    return mas_li
	}


	function notFound() {
	    removeChildren(ul);
	    var item = document.createElement('li');
	    item.innerHTML = 'Ничего не найдено'
	    ul.appendChild(item);
	}

	function removeChildren(elem) {
	    try {
	        elem.innerHTML = '';
	    } catch (e) {
	        while (elem.firstChild) {
	            elem.removeChild(elem.firstChild);
	        }
	    }
	}

	function addAll() {
	    $.ajax({
	        url: 'countries.html', // корне тупо лежит страница списком стран
	        success: function (data) {
	            $('.countries').html(data);
	        }
	    });
	}
	bt.onclick = function () {
	    if (ul.style.display != 'none') {
	        ul.style.display = 'none';
	    } else {
	        ul.style.display = 'list-item';
	    }
	}; < /html>