JavaScript: busque texto dentro de una página y salte a la ubicación en la página

Question

Tengo una página web con una gran lista de registros (digamos más de 250 filas de datos en una tabla) y quiero poder simplemente visitar la página, comenzar de inmediato escribiendo, y que me lleve a la primera fila que coincida con el texto que escribí.

Lo ideal es que, si continúo escribiendo más caracteres para que la primera coincidencia ya no coincida, podría continuar respondiendo a mi entrada y saltar a la nueva coincidencia.

He intentado con window.find() pero no he tenido mucho éxito ... ¿alguien puede recomendar una solución de trabajo?

Básicamente estoy buscando el equivalente a presionar 'CTRL-F' en mi teclado ... excepto sin la necesidad de presionar CTRL-F para hacerlo realidad.

Answer 1

Creo que la parte difícil de esto es en realidad la aceptación de la entrada del usuario de forma inteligente. Por lo tanto, diría que lo mejor que puede hacer es pasar su búsqueda a un complemento de tipo autocompletar. Una vez que la página está lista, pasa el foco a un cuadro de texto de entrada y luego permite que el complemento haga su magia mientras busca ...

Por ejemplo, podría usar el complemento quicksearch.

Entonces dada una tabla de datos y una entrada como esta:

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

usted podría tener una función de lista que se ve así:

$('#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(); 

¡Pruébalo aquí: http://jsfiddle.net/ZLhAd/369/

EDIT: otra respuesta/comentario agregado para hacer la entrada fija y detener la barra de saltos de forma ridícula.

Answer 2

OK, aquí hay un punto de vista diferente, directamente a través de pulsación de tecla:

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

Básicamente, pulsación de tecla se unen y el uso que:

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

findString es sólo un buscador de cadena de la página del navegador vagamente cruz. Ver el violín para más detalles.