JavaScript - die Suche von text innerhalb einer Seite springen, um Lage in die Seite

Ich habe eine Internetseite mit einer umfangreichen Liste von Datensätzen (sagen wir 250+ Zeilen von Daten in einer Tabelle) und möchten in der Lage sein besuchen Sie einfach die Seite, sofort mit der Eingabe beginnen, und es springen mir die erste Zeile entspricht der text, den ich eingegeben haben.

Ideal, wenn ich dann weiter mehr Zeichen eingeben, damit das erste match passt nicht mehr, er könnte dann weiterhin reagieren auf meine Eingaben und springen mich an das neue match.

Habe ich versucht, mit Fenster.finden (), aber hatte noch nicht viel Erfolg... kann jemand empfehlen, eine funktionierende Lösung?

Ich bin im wesentlichen der Suche nach dem äquivalent zu schlagen "STRG-F" auf meiner Tastatur... außer ohne die Notwendigkeit, drücken Sie STRG-F, um Sie geschehen.

InformationsquelleAutor Keith Palmer Jr. | 2010-12-01

  1. 15

    Ich denke, der schwierige Teil ist tatsächlich die Annahme von Benutzereingaben intelligent. Also, ich würde sagen, das beste, was zu tun ist, pass off Ihre Suche nach einer autocomplete-Art-plugin. Sobald die Seite fertig ist, übergeben Sie den Fokus auf einem input-text-Feld, und dann lassen Sie das plugin tun seine Magie, wie Sie suchen...

    Beispielsweise könnten Sie die quicksearch plugin.

    Erhalten dann eine Tabelle mit Daten und eine Eingabe wie:

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

    Könnten Sie haben eine fertige Funktion, die wie folgt aussieht:

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

    Versuchen Sie es hier: http://jsfiddle.net/ZLhAd/369/

    BEARBEITEN: andere Antwort/Kommentar Hinzugefügt, um die Eingabe fest-und halt die scollbar springen um so lächerlich.

    Wow, das rockt! Danke!
    die Fiedel auf dieser wurde gebrochen durch einige Probleme mit github nicht ein richtiges cdn und es konnte nicht die js-Datei zu laden.. fixierte es mit jsfiddle.net/ZLhAd/205
    Der jsfiddle funktioniert nicht und ich kann es nicht auf meiner Website. Die Fehlermeldung erhalten, dass quicksearch ist nicht eine Funktion. Mit chrome 56.0.2924.87 (64-bit). Habe auch versucht firefox 52.0 (32-bit)
    Es angebracht, in Zukunft, versuchen Sie die Ausgabe der Konsole - es sagt Ihnen genau, was das problem ist. Siehe Aktuelles Beispiel und jsfiddle (verlinkt in meiner Antwort jetzt)

    InformationsquelleAutor Ryley

  2. 8

    OK, hier ist ein anderer nehmen, mit Tastendruck direkt:

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

    Grundsätzlich binden Tastendruck und Nutzung:

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

    findString ist nur einige vage cross-browser-Seite string finder. Finden Sie die Geige für details.

    Irgendwelche Gedanken auf, ob dies eine besser/schlechter als deine andere Antwort? Deine andere Antwort, die funktioniert verdammt gut!
    gut, das man nicht haben keine zusätzlichen UI - d.h. Sie könnte überspringen mit der #typed div sichtbar sein. Auch, die andere nur funktioniert wirklich auf eine Tabelle, in der Erwägung, dass diese Texte finden, die in jeden Ort innerhalb des Dokuments. Ich Stimme zu, dass der andere ist schöner, aber trotzdem 🙂
    Ich habe ein schlechtes Gefühl über, wie das interagieren mit normalen browser-Handhabung von wichtigen Veranstaltungen oder andere Dinge in das system. Es kann nichts schlecht machen, aber es scheint besser, Dinge zu tun, in einer normalen Weise, es sei denn, es gibt einen besonders guten Grund, nicht zu, das ist hier nicht der Fall. Es riecht für mich wie die Art von Ansatz, die führen können, um unvorhergesehene und schwer zu identifizieren, Wechselwirkungen mit anderen Dinge im system... ähnlich wie die Verwendung von zu breiten Anwendungsbereich in der Allgemeinen Programmierung.

    InformationsquelleAutor Ryley

Schreibe einen Kommentar