JavaScript - найти текст на странице и перейти к местоположению на странице

У меня есть веб-страница с большим списком записей (скажем, 250 + строк данных в таблице), и вы хотите иметь возможность просто посещать страницу, сразу начинать вводить текст и переходить к первой строке, которая соответствует текст, который я набрал.

В идеале, если я затем продолжал набирать больше символов, поэтому первое совпадение больше не соответствует, оно может продолжать отвечать на мой ввод и переходить к новому совпадению.

Я пробовал с window.find(), но не имел большого успеха... может ли кто-нибудь рекомендовать рабочее решение?

Я по существу ищу эквивалент удара CTRL-F на моей клавиатуре... кроме того, чтобы не нажимать CTRL-F, чтобы это произошло.

Ответ 1

Я думаю, что сложная часть этого - это разумное принятие пользовательского ввода. Поэтому я бы сказал, что самое лучшее, что нужно сделать, - это отказаться от поиска в плагине автозаполнения. Как только страница будет готова, вы передадите фокус на текстовое поле ввода, а затем пусть плагин сделает свою магию при поиске...

Например, вы можете использовать плагин quicksearch.

Затем задайте таблицу данных и ввод, подобный этому:

<input id="searcher" type="text" name="searcher">

У вас может быть готовая функция, которая выглядит так:

$('#searcher').quicksearch('table tbody tr', {
    'delay': 100,
    'bind': 'keyup keydown',
    'show': function() {
        if ($('#searcher').val() === '') {
            return;
        }
        $(this).addClass('show');
    },
    'onAfter': function() {
        if ($('#searcher').val() === '') {
            return;
        }
        if ($('.show:first').length > 0){
            $('html,body').scrollTop($('.show:first').offset().top);
        }
    },
    'hide': function() {
        $(this).removeClass('show');
    },
    'prepareQuery': function(val) {
        return new RegExp(val, "i");
    },
    'testQuery': function(query, txt, _row) {
        return query.test(txt);
    }
});

$('#searcher').focus();

Попробуйте здесь: http://jsfiddle.net/ZLhAd/369/

РЕДАКТИРОВАТЬ: добавлен другой ответ/комментарий, чтобы сделать вход фиксированным и остановить смещение scobbbar так смешно.

Ответ 2

ОК, здесь другой подход, используя keypress напрямую:

http://jsfiddle.net/ryleyb/VFVZL/1/

В основном, привяжите нажатие клавиши и используйте это:

$('body').keypress(function(e) {
    $('#typed').append(String.fromCharCode(e.which));
    if (!findString($('#typed').text())) {
        $('#typed').text('');
    }
});

findString - это всего лишь несколько неопределенный кросс-браузер поисковой системы. Подробнее см. Скрипку.