Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: scroll to anchor mit dynamischer Eingabe

  1. #1
    Neuer Benutzer
    Registriert seit
    08.01.2018
    Beiträge
    7

    scroll to anchor mit dynamischer Eingabe

    Guten Abend und allen Nutzern dieses Forum noch ein frohes und gesundes neues Jahr.

    Ich bin neu in diesem Forum und hardere zurzeit mit einem kleinen - möglicherweise gdanklichen - Problem.

    In einem Projekt verwende ich ein DIV-Container in dem mit jQuery und Ajax eine Liste von Werten (Begriffe) geladen werden.
    Über ein Input-Feld soll der Nutzer die Möglichkeit haben, die Liste schnell zu durchsuchen. Dabei soll die Liste automatisch zum ersten übereinstimmenden Wert scrollen.

    Beispiel-Liste:
    - Ananas
    - Apfel
    - Banane
    - Birne
    ...
    - Zitrone

    Gibt der Nutzer ein "b" ein, soll das Div "Banane" anzeigen, wird zusätzlich ein "i" eingegeben "Birne".

    Hier das Script, das grundsätlich funktioniert ...

    Code:
            searchKontakt : function () {
    		var searchStr = '';
    		$('#searchFld').on('keyup', function (event) {
    					if (!event.shiftKey || !event.altKey || !event.ctrlKey) {
    						searchStr = this.value.toLowerCase();
    						//alert (searchStr);
    						$('#Kontaktlist').find('li').each(function(index) 					{
    						if (index === 0) return;
    						var str = $(this).first().text().toLowerCase();
    						if (str.indexOf(searchStr) === 0) {
    							$.scrollToAnchor('a'+$(this).attr('id'));
    							
    							return false;
    						}
    						});
    					}
    				});
    	}
    Wie gesagt, das Script funktioniert soweit ... wird ein "b" eingegeben, springt die Liste zu "Banane". Allerdings wird die Eingabe um ein "i" ergänzt, springt die Liste nicht auf "Birne" sondern wieder auf "Ananas". Erst wenn das "r" eingegeben wurde, springt er auf "Birne".

    Vielleicht hat jemand eine Idee, ich sehe gearde den Wald vor lauter Bäumen nicht.

    Für eure Antworten schon einmal vielen Dank.

    MfG Jacke

  2. #2
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.669
    Ich vermute es liegt am $.scrollToAnchor, es scheint als wenn die Funktion fehlerhaft ist im Falle wenn der Benutzer bereits auf dem Element ist wo er hingelangen sollte.
    Pakete werden jetzt mit $_DHL geliefert... nicht mehr mit $_POST

  3. #3
    Neuer Benutzer
    Registriert seit
    08.01.2018
    Beiträge
    7
    Hallo s4ty,

    danke für den Hinweis ... allerdings ist die Funktion sehr übersichtlich gehalten. Hier der Code:
    Code:
            scrollToAnchor : function (aid) {
    		var aTag = $('li[name="'+aid+'"]');
    		$('#Content_Kontaktlist #Kontaktlist').animate({scrollTop: (aTag.offset().top-127)}, 'slow'); 
    	},
    Liegt es ggfs an .animate?
    Denn grundsätzlich macht sie ja was sie soll. Den entsprechenden Listeneintrag aufrufen ... die -127 dienen übrigens nur dazu, den Eintrag sichtbar zu lassen.

    Ich werde dem Ansatz mal nachgehen.

    Gruß

    Jacke

  4. #4
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.669
    Zeig mal bitte den ganzen code oder besser noch lade dein code bei jsbin oder jsfiddle hoch -> http://jsbin.com/ sonst kann ich das so leider nicht nachstellen.
    Pakete werden jetzt mit $_DHL geliefert... nicht mehr mit $_POST

  5. #5
    Neuer Benutzer
    Registriert seit
    08.01.2018
    Beiträge
    7
    Hallo s4ty,

    ich habe den Code auf Jsbin nachgebaut - war das erste Mal, dass ich die Oberfläche verwendet habe. Hoffentlich ist es richtig:https://jsbin.com/bamexa/edit?html,js,output

    Der Fehler wird in jedem Fall reproduziert.
    Geändert von Jacke (10.01.2018 um 20:47 Uhr)

  6. #6
    Neuer Benutzer
    Registriert seit
    08.01.2018
    Beiträge
    7
    Okey, ich habe das Problem etwas weiter einkreisen können - allerdings ohne das ich gerade eine Idee habe, dieses zu lösen.

    Wenn der Nutzer eine Taste (einen Buchstaben) drückt wird der entsprechende Offset-Wert ermittelt; zum Beispiel offset = 205.
    Anschließend fällt der Wert allerdings wieder auf 0 zurück ...

    Wenn man die Code-Zeile
    Code:
    $('#Content_Kontaktlist #Kontaktlist').animate({scrollTop: (aTag.offset().top-127)}, 'slow');
    wie folgt um eine Callback-Funktion erweitert, lässt sich der scrollTop-Wert ausgeben:
    Code:
    $('#Content_Kontaktlist #Kontaktlist').animate({scrollTop: (aTag.offset().top-127)}, 'slow', alert ($('#Content_Kontaktlist #Kontaktlist').scrollTop()));
    Die Frage ist nun, wie kann ich verhindern, dass der Wert auf 0 zurückfällt?

    Falls jemand eine Idee hat, gerne!

  7. #7
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.669
    Was hältst du von der Idee, dass du im Falle von 0 einfach gar nichts machst?

    Sprich du machst eine Abfrage ob der offset 0 ist und wenn dies so ist hat der Benutzer quasi seine Suche nur verfeinert und wir müssen den scroll auch gar nicht mehr auslösen, da der Benutzer bereits beim Treffer ist.

    PHP-Code:
    if (aTag.offset().top === 0) {
      return 
    false;
    }

    $(
    '#Content_Kontaktlist #Kontaktlist').animate({scrollTop: (aTag.offset().top-127)}, 'slow'); 
    Pakete werden jetzt mit $_DHL geliefert... nicht mehr mit $_POST

  8. #8
    Neuer Benutzer
    Registriert seit
    08.01.2018
    Beiträge
    7
    Hallo s4ty,

    danke für den Deinen Ansatz.

    Allerdings fällt === 0 trotzdem wieder auf den Anfang der Liste zurück. Wenn ich den Wert auf === 127 setze, funzt es auch für den ersten Treffer.
    Allerdings wenn ich die Suche verfeinere jedoch wenn ich den nächstfolgenden Wert (Beispiel: "Bal" --> liefert "Bald" == richtig, aber "Ball" liefert "Anfang" == falsch).

    Ich vermute, das es sich um ein Problem in meiner Logik handelt. Ich habe in einem anderen Zusammenhang ein ähnliches Problem gehabt. Dort hakte es an der Kombi einer .each-Anweisung und eines folgenden .on (click) Events.
    Hier ist es ja ähnlich. Ggfs kann mir .trigger weiterhelfen.

  9. #9
    Neuer Benutzer
    Registriert seit
    08.01.2018
    Beiträge
    7

    Idee Nicht schön, aber praktikabel ;-)

    Keine wirkliche Lösung des Problems, aber eine recht einfache Möglichkeit, die Liste schnell zu durchsuchen und den gesuchten Wert "schneller" anzeigen zu lassen:
    Code:
    scrollToAnchor : function (aid, index) {
    var aTag = $('li[name="'+aid+'"]');
    		$('#Kontaktlist li[style="display: none;"]').show();
    		var elements = $('#Kontaktlist li').each(function(i) {				  
    							if ((index > 1) && (i<index)) {$(this).hide();}			  
    						});
    }
    Alle nicht "benötigten" Listenelemente werden versteckt. Damit ist der gesuchte Listeneintrag ersteinmal oben in der Liste.

    Wie gesagt nicht schön, aber es funzt. Vielleicht finde ich später noch eine schönere Lösung, jetzt gehts erst mal weiter.

    Danke an s4ty für die Unterstützung!

  10. #10
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.669
    $('#Kontaktlist li[style="display: none;"]').show();

    Da reicht auch einfach $('#Kontaktlist li').show(); Bei Elementen die bereits sichtbar sind hat .show() keinen Effekt.
    Pakete werden jetzt mit $_DHL geliefert... nicht mehr mit $_POST

Seite 1 von 2 12 LetzteLetzte

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •