Suche LI-Liste mit jquery

Grüße,

Habe ich einen Haufen <li> Elemente in ein div-das div Scrollbar ist

Ich würde gerne ein Textfeld zu markieren, die erste li mit einem bestimmten text aus einer textbox und button suchen.

und der li sollte sichtbar wurde 🙁

Ich habe keine Ahnung, wie dies zu tun 🙁

  • Ich habe keine Ahnung, was Sie wollen 🙁
  • Ich denke, Sie wollen so etwas wie jQuery-UI-autocomplete? jqueryui.com/demos/autocomplete
  • Correia: ich möchte hervorheben, li, enthält einen text, den ich auf das Textfeld "suchen" @superUntitled: Das ist eine gute Hilfe, schon, aber noch muss ich hervorheben, LI und scrollen der div bis es erscheint :S
InformationsquelleAutor Killercode | 2011-05-27
  1. 5

    Live-Demo Aktualisiert mit scrollen

    Markup

    <div id='test'>
    <ul>
         <li>Text</li>
         <li>Something</li>
         <li>Hey</li> 
         <li>der</li>
         <li>herp</li>
         <li>derp</li>
         <li>Testing</li>
    </ul>
</div>

    JS

    $('#searchBtn').click(function(){
    var searchString = $('#searchText').val(),
        foundLi = $('li:contains("' + searchString + '")');

    foundLi.addClass('found');
    $('#test').animate({ scrollTop: foundLi.offset().top});
});
    • Beachten Sie, dass die "enthält" - Selektor verwendet, die Weg brechen, wenn die such-Zeichenkette bestimmte Zeichen enthält
    • sorry funktioniert nicht....
    • Habe das problem gefunden 😛
    • ok, alles erledigt, außer die scroll-Teil 😛
    • fertig! es ist toll
    • Coole froh, dass ich helfen konnte.
    • Werden Sie wollen, stellen Sie sicher, dass Sie auch deaktivieren Sie die Ergebnisse, wenn Sie drücken Sie senden. Ansonsten mal ein LI ausgewählt ist, wird es immer ausgewählt werden, auch wenn es nicht mit dem aktuellen Suchbegriff. hier ist eine leicht angepasste version mit der Suche auf keyup(). jsfiddle.net/7A5NX/4
    • uhh Grund für den downvote, wie 3 Jahre später?

    InformationsquelleAutor Loktar
  2. 0

    Verwende ich das scrollTo-plugin: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
    dann tun Sie etwas wie folgt aus (nicht getestet)

    $('#thediv').scrollTo( $('li:contains("'+yourtext+'")') );
    InformationsquelleAutor Andy
  3. 0

    HTML:

    <div style="height: 40px; overflow-y: scroll" id="my_div">
    <li>the first li</li>
    <li>the second li</li>
    <li>the third li</li>
    <li>the fourth li</li>
    ...
</div>

<input type="text" id="my_text_box" />
<input type="submit" id="my_search_button" />

    Javascript:

    $('#my_search_button').click(function(e) {
    var my_search = $('#my_text_box').val(); //the text to search for
    var $my_div = $('#my_div'); //the div
    $my_div.find('li').each(function(idx, elem) {
      $elem = $(elem);
      if ($elem.text().indexOf(my_search) != -1) { //if it contains your searched text
        $elem.show(); //display it ? only if needed, unclear from question
        $elem.addClass('highlighted'); //add your class for the highlight
        $my_div.scrollTop($elem.position().top); //scroll to it
        return false; //stop the loop
      }
    });

    e.preventDefault(); //stop an actual form from being submitted
});
    InformationsquelleAutor Lepidosteus
  4. 0

    Ich bin auf der Suche nach etwas ähnliches:

    Meine Website-Besucher sollten in der Lage sein, um die Suche innerhalb einer anklickbaren Liste der Standorte (für das lokale Wetter-Bericht).

    Idealerweise sollte es ein match-Mechanismus:

    als der Besucher beginnt Sie, den Namen der Lage, diesen Namen sollte suggeriert werden automatisch in das Suchfeld ein.

    Ist es code wie das?

    InformationsquelleAutor Hans
  5. 0

    Check this out https://github.com/svapreddy/cssListJS.

    Suchen Funktionalität umgesetzt mit reinem CSS und bisschen JS

    InformationsquelleAutor redV
Schreibe einen Kommentar