Переход к следующему элементу поиска

[Mike.P]

Добрый день уважаемые форумчане!

Прошу вашей помощи!

Ни как не могу добиться следующего результата:

Хотелось бы чтобы при вводе цели поиска в поисковую строку, находился не только результат, но и происходил скрол по станице к найденному элементу!

[Mike.P]

Вот сам код

[Mike.P]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function searchAndHighlight(searchTerm, selector) {
if (searchTerm) {
//var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
//var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
var selector = selector || "#realTimeContents"; //use body as selector if none provided
var searchTermRegEx = new RegExp(searchTerm, "ig");
var matches = $(selector).text().match(searchTermRegEx);
if (matches != null && matches.length > 0) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights 

//Remove the previous matches
$span = $('#realTimeContents span');
$span.replaceWith($span.html());

/*if (searchTerm === "&") {
searchTerm = "&amp;";
searchTermRegEx = new RegExp(searchTerm, "ig");
}
if (searchTerm === " ") {
searchTerm = "&nbsp;";
searchTermRegEx = new RegExp(searchTerm, "ig");
}*/
if (searchTerm.length === 2) {
//searchTerm = "&amp;";
//searchTermRegEx = new RegExp(searchTerm, "ig");
alert("Нужно ввести более двух символов!");
return;
}

$(selector).html($(selector).html().replace(search TermRegEx, "<span class='match'>" + searchTerm + "</span>"));
$('.match:first').addClass('highlighted');

var i = 0;

$('.nextButton').off('click').on('click', function () {
i++;

if (i >= $('.match').length) i = 0;

$('.match').removeClass('highlighted');
$('.match').eq(i).addClass('highlighted');
$('.ui-mobile-viewport').animate({
scrollTop: $('.match').eq(i).offset().top
}, 300);
});
$('.previousButton').off('click').on('click', function () {

i--;

if (i < 0) i = $('.match').length - 1;

$('.match').removeClass('highlighted');
$('.match').eq(i).addClass('highlighted');
$('.ui-mobile-viewport').animate({
scrollTop: $('.match').eq(i).offset().top
}, 300);
});




if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').positi on().top);
}
return true;
}
}
return false;
}

$(document).on('click', '.searchButtonClick', function (event) {

$(".highlighted").removeClass("highlighted").remov eClass("match");
if (!searchAndHighlight($('.textSearch').val())) {
alert("Нет совпадений!");
}


});
function handleEnter(inField, e)
{
var charCode;

//Get key code (support for all browsers)
if(e && e.which)
{
charCode = e.which;
}
else if(window.event)
{
e = window.event;
charCode = e.keyCode;
}

if(charCode == 13)
{
$('.searchButtonClick').click(); //Call your submit function
}
}

[ksa]

Хотелось бы чтобы при вводе цели поиска в поисковую строку, находился не только результат, но и происходил скрол по станице к найденному элементу!

http://dontforget.pro/javascript/pla...ntu-na-jquery/
https://webkab.ru/plavnyj-skroll-k-elementu-jquery/

[Mike.P]

http://dontforget.pro/javascript/pla...ntu-na-jquery/
https://webkab.ru/plavnyj-skroll-k-elementu-jquery/

А можно ли как то поправить часть моего кода???

[Mike.P]

Так как не до конца могу понять как внедрить то что Вы сбросили в сам код))

[Mike.P]

Нашел что то похожее, что мне нужно, но ни как не могу правильно его запилить в свой код!

function scrollToFirstFoundTerm()
{
 var firstFoundTerm = $('.highlight:first');
    if (firstFoundTerm.length > 0)
         $('html').scrollTop(firstFoundTerm.offset().top);

[j0hnik]

<style>
	div{
	margin: 1000px 0;
}
</style>
<div>0</div>
<div>1</div>
<div>2</div>
<script>
document.querySelectorAll('div')[2].scrollIntoView({ behavior: 'smooth' });
</script>

[Mike.P]

<style>
	div{
	margin: 1000px 0;
}
</style>
<div>0</div>
<div>1</div>
<div>2</div>
<script>
document.querySelectorAll('div')[2].scrollIntoView({ behavior: 'smooth' });
</script>

Это нужно заключить каждую ссылку в <div>???