droganaida/supersearch.html

## supersearch.html
<html>
<head>
    <title>BlondieCode. Лайфхаки программиста. Поиск с подстановкой.</title>
    <meta charset="utf-8">
    <meta name="description" content="BlondieCode. Блог блондинки-программиста. Подписывайся. Здесь много интересного.">
    <meta name="keywords" content="BlondieCode, программирование">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        body, html {padding: 0;margin: 0;}
        body {
            background: #efefef; color: #2d2d2d;
            font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px;
            line-height: 1.5;
        }
        h1 {font-size: 24px;}
        h2 {font-size: 22px;}
        a {color: #4f8d88}
        a:hover {color: #1ea59b}

        .header {
            background: #4f8d88;
            color: #ffffff;
            padding: 20px;
            box-sizing: border-box;
        }
        .header h1 {
            margin: 0;
        }
        .content {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        /*========================================== Общие стили ================================================*/

        body {
            font-size: 16px;
            font-family: Helvetica, Arial, san-serif;
            line-height: 1.6;
            color:#595959;
            background: #efefef;
        }

        a {
            outline: none; text-decoration: underline; color: #1e1d26; transition: .3s;
        }
        a:hover {
            color: #6a658e; transition: .3s;
        }

        p {
            text-align: left;
            margin: 20px 0;
        }

        h1 {font-size: 26px;}

        header, footer {
            background: #605c7a; color: #ffffff; width: 100%; text-align: center;
        }

        footer {
            font-size: 14px; padding: 10px 0;
        }

        .holder {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
        }

        /*========================================== Супер поиск ================================================*/

        input {
            font-size: 18px;
            padding: 10px;
            width: 100%;
            max-width: 600px;
            margin: 50px 0;
            border: 2px solid #d0cee5;
            border-radius: 5px;
            vertical-align :middle;
            box-sizing: border-box;
        }

        input:focus {
            outline: 0;
        }

        .searchHolder {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            overflow: visible;
            position: relative;
        }

        .autoFillBar {
            background: #d0cee5;
            width: 100%;
            position: absolute;
            top: 98px;
            z-index: 9;
            border-radius: 5px;
            overflow: hidden;
        }

        .autoFillBar .item {
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            text-align: left;
            color: #1e1d26;
            transition: .2s;
            cursor: pointer;
            font-size: 18px;
        }

        .autoFillBar .item:hover, .autoFillBar .item.active {
            background: #e5e3f9;
            transition: .2s;
        }

        .highlighted {
            background: #ffe47d;
        }
    </style>

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        //================================= Поиск с подстановкой ====================================//
        //=================================== Aida Drogan © 2016 ====================================//
        //=========================== #BlondieCode - уроки программирования =========================//

        (function ( $ ) {

            $.fn.autoSearch = function() {

                var request = '';
                var input = this;

                input.wrap('<div class="searchHolder"></div>');
                input.parent().append('<div class="autoFillBar"></div>');
                var autoFillBar = input.next();

                input.on('focus', function(){

                    searchCheck();

                });

                input.on('keyup', function(e){
                    if (e.keyCode == 40){

                        if (autoFillBar.find('.active').length == 0){
                            autoFillBar.find('.item:first').addClass('active');
                        } else {
                            autoFillBar.find('.active').removeClass('active').next().addClass('active');
                        }

                        var val = autoFillBar.find('.active').text();
                        input.val(val);

                    } else if (e.keyCode == 38) {

                        if (autoFillBar.find('.active').length == 0){
                            autoFillBar.find('.item:last').addClass('active');
                        } else {
                            autoFillBar.find('.active').removeClass('active').prev().addClass('active');
                        }

                        var val = autoFillBar.find('.active').text();
                        input.val(val);

                    } else if (e.keyCode == 13) {

                        //тут можно сделать переход на страницу статьи или все что пожелаешь

                    } else {

                        searchCheck();
                    }

                });

                autoFillBar.on('click', '.item', function(){

                    //тут можно сделать переход на страницу статьи или все что пожелаешь
                    input.val( $(this).text() );
                    return false;

                });

                $('html').on('click', function(e){

                    if ((!$(e.target).hasClass('autoFillBar')) && (!$(e.target).parent().hasClass('autoFillBar')) && (!$(e.target).parent().hasClass('searchHolder'))) {

                        autoFillBar.slideUp('fast', function(){
                            autoFillBar.children().remove();
                        });
                    }
                });


                function searchCheck(){


                    if (input.val().length >= 2){

                        // тут нужно будет описать ajax-запрос к бэкэнду, который вернет результаты поиска

                        var data = {};
                        data.action = 'search';
                        data.request = input.val();

                        // ajax-запрос на сервер, откомментируй, когда будет куда отсылать POST

//                        $.ajax({
//                            url: '/',
//                            type: 'POST',
//                            dataType: 'json',
//                            data: data
//                        }).done(function(data){

                                    autoFillBar.children().remove();

                                    // следующая строчка читает результат ajax-запроса, откомментируй ее, когда будет готов бэкэнд
                                    // var articlesArray = data.result;

                                    // Здесь я описываю фейковый поиск, чтобы продемонстрировать работу плагина
                                    // строки 241 - 262 можно выпилить несчадно
                                    // поиск ведется только по одному слову, но твоя база точно может лучше ;)
                                    var articlesArray = [];

                                    var dbArticles = [
                                        {title: "Кошки не едят горошек"},
                                        {title: "Кошка лучший друг человека"},
                                        {title: "Блондинка тоже человек"},
                                        {title: "Блондинка в платье в горошек"},
                                        {title: "Кошки любят программирование"},
                                        {title: "Программирование под силу не только кошкам, но и блондинкам"},
                                        {title: "Железный человек съел свою кошку"}
                                    ];

                                    for (var j=0; j<dbArticles.length; j++){

                                        var searchRequestStart = new RegExp('^' + input.val() + '.*', 'i');
                                        var searchRequestMiddle = new RegExp(' ' + input.val() + '.*', 'i');

                                        if ( (searchRequestStart.test(dbArticles[j].title)) || (searchRequestMiddle.test(dbArticles[j].title)) ) {

                                            articlesArray.push(dbArticles[j]);
                                        }
                                    }

                                    // Здесь фейк заканчивается и начинаются чудеса

                                    for (var i=0; i <= articlesArray.length - 1; i++){

                                        var name = articlesArray[i].title;
                                        var regex = input.val();

                                        if (regex.indexOf(' ') == -1){
                                            var searchMask = regex;
                                            var regEx = new RegExp(searchMask, "ig");

                                            var num = name.toLowerCase().indexOf(regex.toLowerCase());
                                            var strname = name.substr(num, regex.length);
                                            var replaceMask = '<b class="highlighted">' + strname + '</b>';
                                            name = name.replace(regEx, replaceMask);

                                        } else {


                                            var regexArr = regex.split(' ');

                                            for(var n=0; n<regexArr.length; n++){

                                                if (regexArr[n].length > 0){
                                                    var searchMask = regexArr[n];
                                                    var regEx = new RegExp(searchMask, "ig");

                                                    var num = name.toLowerCase().indexOf(regexArr[n].toLowerCase());
                                                    var strname = name.substr(num, regexArr[n].length);
                                                    var replaceMask = '<b class="highlighted">' + strname + '</b>';
                                                    var stopWords = '<b class="highlighted"></b>';
                                                    if (stopWords.indexOf(strname.toLowerCase()) == -1){
                                                        name = name.replace(regEx, replaceMask);
                                                    }
                                                }
                                            }
                                        }

                                        autoFillBar.append('<div class="item">' +
                                                '<span>' + name + '</span>' +
                                                '</div>');
                                    }

                                    autoFillBar.slideDown('fast');

                                  // конец ajax-запроса, ты знаешь, что делать ;)
//                                })
                    }
                }

                return input;
            };

            $(document).ready(function(){

                $('#superSearch').autoSearch();

            });

        }( jQuery ));

    </script>

</head>
<body>
    <header>
        <div class="holder">
            <h1>#BlondieCode. Лайфхаки программиста. Поиск с подстановкой.</h1>
        </div>
    </header>
    <div class="holder">
        <input id="superSearch">
        <p>В данном примере Backend реализован на Node.js, в качестве базы данных выступает Mongodb</p>
        <p>Если эта реализация серверной части вам не подходит, смело закрывайте это видео после описания клиентской части</p>
        <p>Ссылки на ресурсы с чистым фронтэндом и полным проектом в описании к видео</p>
        <p>Киентский скрипт использует библиотеку jQuery</p>
        <p>В этом уроке я покажу несколько техник поиска по базе данных Mongodb и напишу плагин для автоподстановки</p>
        <p>Больше интересного на  <a href="https://www.youtube.com/channel/UCSsg9NLCse2XQCIRgfmJu3Q" target="_blank">#BlondieCode</a></p>
        <p>Мне нужно больше контента, чтобы страница максимально была похожа на настоящую</p>
        <p>Пока я пишу бессвязный текст для уникального контента, в Google было отправлено более двух миллионов запросов</p>
        <p>Спонсор семантичсекого ядра для демонстрации поиска мой кот Бонифаций</p>
    </div>
    <footer><small>Aida Drogan © 2016</small></footer>
</body>
</html>
	<html>
	<head>
	<title>BlondieCode. Лайфхаки программиста. Поиск с подстановкой.</title>
	<meta charset="utf-8">
	<meta name="description" content="BlondieCode. Блог блондинки-программиста. Подписывайся. Здесь много интересного.">
	<meta name="keywords" content="BlondieCode, программирование">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>

	body, html {padding: 0;margin: 0;}
	body {
	background: #efefef; color: #2d2d2d;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px;
	line-height: 1.5;
	}
	h1 {font-size: 24px;}
	h2 {font-size: 22px;}
	a {color: #4f8d88}
	a:hover {color: #1ea59b}

	.header {
	background: #4f8d88;
	color: #ffffff;
	padding: 20px;
	box-sizing: border-box;
	}
	.header h1 {
	margin: 0;
	}
	.content {
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	}

	/========================================== Общие стили ================================================/

	body {
	font-size: 16px;
	font-family: Helvetica, Arial, san-serif;
	line-height: 1.6;
	color:#595959;
	background: #efefef;
	}

	a {
	outline: none; text-decoration: underline; color: #1e1d26; transition: .3s;
	}
	a:hover {
	color: #6a658e; transition: .3s;
	}

	p {
	text-align: left;
	margin: 20px 0;
	}

	h1 {font-size: 26px;}

	header, footer {
	background: #605c7a; color: #ffffff; width: 100%; text-align: center;
	}

	footer {
	font-size: 14px; padding: 10px 0;
	}

	.holder {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	}

	/========================================== Супер поиск ================================================/

	input {
	font-size: 18px;
	padding: 10px;
	width: 100%;
	max-width: 600px;
	margin: 50px 0;
	border: 2px solid #d0cee5;
	border-radius: 5px;
	vertical-align :middle;
	box-sizing: border-box;
	}

	input:focus {
	outline: 0;
	}

	.searchHolder {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	overflow: visible;
	position: relative;
	}

	.autoFillBar {
	background: #d0cee5;
	width: 100%;
	position: absolute;
	top: 98px;
	z-index: 9;
	border-radius: 5px;
	overflow: hidden;
	}

	.autoFillBar .item {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	text-align: left;
	color: #1e1d26;
	transition: .2s;
	cursor: pointer;
	font-size: 18px;
	}

	.autoFillBar .item:hover, .autoFillBar .item.active {
	background: #e5e3f9;
	transition: .2s;
	}

	.highlighted {
	background: #ffe47d;
	}
	</style>

	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

	<script type="text/javascript">

	//================================= Поиск с подстановкой ====================================//
	//=================================== Aida Drogan © 2016 ====================================//
	//=========================== #BlondieCode - уроки программирования =========================//

	(function ( $ ) {

	$.fn.autoSearch = function() {

	var request = '';
	var input = this;

	input.wrap('<div class="searchHolder"></div>');
	input.parent().append('<div class="autoFillBar"></div>');
	var autoFillBar = input.next();

	input.on('focus', function(){

	searchCheck();

	});

	input.on('keyup', function(e){
	if (e.keyCode == 40){

	if (autoFillBar.find('.active').length == 0){
	autoFillBar.find('.item:first').addClass('active');
	} else {
	autoFillBar.find('.active').removeClass('active').next().addClass('active');
	}

	var val = autoFillBar.find('.active').text();
	input.val(val);

	} else if (e.keyCode == 38) {

	if (autoFillBar.find('.active').length == 0){
	autoFillBar.find('.item:last').addClass('active');
	} else {
	autoFillBar.find('.active').removeClass('active').prev().addClass('active');
	}

	var val = autoFillBar.find('.active').text();
	input.val(val);

	} else if (e.keyCode == 13) {

	//тут можно сделать переход на страницу статьи или все что пожелаешь

	} else {

	searchCheck();
	}

	});

	autoFillBar.on('click', '.item', function(){

	//тут можно сделать переход на страницу статьи или все что пожелаешь
	input.val( $(this).text() );
	return false;

	});

	$('html').on('click', function(e){

	if ((!$(e.target).hasClass('autoFillBar')) && (!$(e.target).parent().hasClass('autoFillBar')) && (!$(e.target).parent().hasClass('searchHolder'))) {

	autoFillBar.slideUp('fast', function(){
	autoFillBar.children().remove();
	});
	}
	});


	function searchCheck(){


	if (input.val().length >= 2){

	// тут нужно будет описать ajax-запрос к бэкэнду, который вернет результаты поиска

	var data = {};
	data.action = 'search';
	data.request = input.val();

	// ajax-запрос на сервер, откомментируй, когда будет куда отсылать POST

	// $.ajax({
	// url: '/',
	// type: 'POST',
	// dataType: 'json',
	// data: data
	// }).done(function(data){

	autoFillBar.children().remove();

	// следующая строчка читает результат ajax-запроса, откомментируй ее, когда будет готов бэкэнд
	// var articlesArray = data.result;

	// Здесь я описываю фейковый поиск, чтобы продемонстрировать работу плагина
	// строки 241 - 262 можно выпилить несчадно
	// поиск ведется только по одному слову, но твоя база точно может лучше ;)
	var articlesArray = [];

	var dbArticles = [
	{title: "Кошки не едят горошек"},
	{title: "Кошка лучший друг человека"},
	{title: "Блондинка тоже человек"},
	{title: "Блондинка в платье в горошек"},
	{title: "Кошки любят программирование"},
	{title: "Программирование под силу не только кошкам, но и блондинкам"},
	{title: "Железный человек съел свою кошку"}
	];

	for (var j=0; j<dbArticles.length; j++){

	var searchRequestStart = new RegExp('^' + input.val() + '.*', 'i');
	var searchRequestMiddle = new RegExp(' ' + input.val() + '.*', 'i');

	if ( (searchRequestStart.test(dbArticles[j].title)) \|\| (searchRequestMiddle.test(dbArticles[j].title)) ) {

	articlesArray.push(dbArticles[j]);
	}
	}

	// Здесь фейк заканчивается и начинаются чудеса

	for (var i=0; i <= articlesArray.length - 1; i++){

	var name = articlesArray[i].title;
	var regex = input.val();

	if (regex.indexOf(' ') == -1){
	var searchMask = regex;
	var regEx = new RegExp(searchMask, "ig");

	var num = name.toLowerCase().indexOf(regex.toLowerCase());
	var strname = name.substr(num, regex.length);
	var replaceMask = '<b class="highlighted">' + strname + '</b>';
	name = name.replace(regEx, replaceMask);

	} else {


	var regexArr = regex.split(' ');

	for(var n=0; n<regexArr.length; n++){

	if (regexArr[n].length > 0){
	var searchMask = regexArr[n];
	var regEx = new RegExp(searchMask, "ig");

	var num = name.toLowerCase().indexOf(regexArr[n].toLowerCase());
	var strname = name.substr(num, regexArr[n].length);
	var replaceMask = '<b class="highlighted">' + strname + '</b>';
	var stopWords = '<b class="highlighted"></b>';
	if (stopWords.indexOf(strname.toLowerCase()) == -1){
	name = name.replace(regEx, replaceMask);
	}
	}
	}
	}

	autoFillBar.append('<div class="item">' +
	'<span>' + name + '</span>' +
	'</div>');
	}

	autoFillBar.slideDown('fast');

	// конец ajax-запроса, ты знаешь, что делать ;)
	// })
	}
	}

	return input;
	};

	$(document).ready(function(){

	$('#superSearch').autoSearch();

	});

	}( jQuery ));

	</script>

	</head>
	<body>
	<header>
	<div class="holder">
	<h1>#BlondieCode. Лайфхаки программиста. Поиск с подстановкой.</h1>
	</div>
	</header>
	<div class="holder">
	<input id="superSearch">
	<p>В данном примере Backend реализован на Node.js, в качестве базы данных выступает Mongodb</p>
	<p>Если эта реализация серверной части вам не подходит, смело закрывайте это видео после описания клиентской части</p>
	<p>Ссылки на ресурсы с чистым фронтэндом и полным проектом в описании к видео</p>
	<p>Киентский скрипт использует библиотеку jQuery</p>
	<p>В этом уроке я покажу несколько техник поиска по базе данных Mongodb и напишу плагин для автоподстановки</p>
	<p>Больше интересного на <a href="https://www.youtube.com/channel/UCSsg9NLCse2XQCIRgfmJu3Q" target="_blank">#BlondieCode</a></p>
	<p>Мне нужно больше контента, чтобы страница максимально была похожа на настоящую</p>
	<p>Пока я пишу бессвязный текст для уникального контента, в Google было отправлено более двух миллионов запросов</p>
	<p>Спонсор семантичсекого ядра для демонстрации поиска мой кот Бонифаций</p>
	</div>
	<footer><small>Aida Drogan © 2016</small></footer>
	</body>
	</html>