Прокрутка к слову из поиска?

Question

[Smeecy Smeecy]

На сайте есть поиск , который подсвечивает все слова , которые были введены в поле поиска. Реализовано это с помощью библиотеки highlights.js и скрипта:

$(function() {
    $('#text-search').bind('keyup change', function(ev) {
        // pull in the new value
        var searchTerm = $(this).val();
        // remove any old highlighted terms
        $('body').removeHighlight();
        // disable highlighting if empty
        if ( searchTerm ) {
            // highlight the new term
            $('body').highlight( searchTerm );
        }
    });
});

Как сделать так, чтобы слово не только подсвечивалось, но и после нажатия клавиши enter происходила прокрутка к этому слову? Что то вроде ctrl+F получается.

Answer 1

[Nick Sdk]

$(function() {
	$('#text-search').unbind().bind('keyup change', function(e){
		if (e.keyCode == 13){
			e.preventDefault();
			console.log($('span.highlight.viewed'));
			var highlights = $('span.highlight');
			if (highlights.length){
				var viewed = $('span.highlight.viewed');
				if (viewed.length >= highlights.length){
					viewed.removeClass('viewed');
					viewed = $('span.highlight.viewed');
				}
				if (viewed.length < highlights.length){
					var noViewed = highlights.parent().find('span.highlight:not([class*="viewed"])');
					var firstNoViewed = noViewed.first();
					var searchPosition = firstNoViewed.offset();
					var searchPositionTop = searchPosition.top;
					var windowHeight = window.innerHeight;
					var windowHeightHalf = windowHeight / 2;
					var scrollPosition = (searchPositionTop > windowHeightHalf) ? (searchPositionTop - windowHeightHalf) : 0;
					window.scrollTo(0, scrollPosition);
					firstNoViewed.addClass('viewed');
				}
			}
		} else {
			var searchTerm = $(this).val();
			$('body').removeHighlight();
			if (searchTerm){
				$('body').highlight(searchTerm);
			}
		}
	});
});

Comments

[Smeecy Smeecy]

совсем ничего не происходит

[Nick Sdk]

при каких условиях ничего не происходит?
что вы делали и "ничего не происходит"? :)

[Nick Sdk]

Скрипт должен отрабатывать почти так же, как и было, только при нажатии на клавишу "энтер" должен скролить к найденным вариантам.

п.с. Думаю, другие знающие смогут упростить (улучшить) скрипт :)

[Smeecy Smeecy]

Nicolas Serdyuk, ввожу слово, нажимаю энтер, ничего не происходит.

[Nick Sdk]

Smeecy Smeecy, странно.
кидаю в консоль - работает.
сохранил к себе ваш сайт
подправил скрипт - тоже работает
возможно что-то делаете не так.
как и где меняли (вставляли) скрипт?

[Smeecy Smeecy]

Nicolas Serdyuk, вставил вместо своего скрипта.

[Smeecy Smeecy]

Nicolas Serdyuk, Спасибо! Со второго раза заработало), не знаю в чем причина была

[Nick Sdk]

Smeecy Smeecy, еще можно немного подправить, чтобы выделялось текущее слово
но, думаю, разберетесь ))