[jQuery] Autosuggest

[Currahee]

Met behulp van jQuery probeer ik een autosuggest in elkaar te zetten. Na het intypen van een zoekterm worden via jquery POST de zoeksuggesties opgehaald en in een lijst geplaatst.

Indien de lijst geopend is wil ik hier door middel van de 'up- en downkey' doorheen lopen. Indien één van de zoeksuggesties is geselecteerd wordt hier een class aan toegevoegd, zodat het voor de gebruiker duidelijk is welke suggestie momenteel geselecteerd is. Indien ik dit test door in de pagina gewoon 'hard' de html te plaatsen dan werkt de code.

Wordt de lijst echter ingeladen door middel van jquery POST, dan wordt korstondig de class geladen, maar na een fractie van een seconde is deze ook weer verdwenen. De gebruiker ziet dan niet meer wat er geselecteerd is. Dit is natuurlijk niet de bedoeling.

Ik heb me al helemaal suf gezocht op google, maar ik kon de oplossing niet vinden. Iemand enig idee wat ik over het hoofd zie?

Een uitgeklede en versimpelde JSFiddle is te vinden op: http://jsfiddle.net/nm0mfmn9/4/. Let op: hier werkt het dus wel, omdat de gegevens niet via een POST worden geladen.

[NMe]

En nu moeten we, zonder ook maar iets gezien te hebben van de code die daadwerkelijk misgaat, raden wat je fout doet?

[Ramon]

Geef dan even een voorbeeld van code waar het misgaat, anders wordt het nogal lastig debuggen.

Op zich heeft een Ajax POST natuurlijk weinig van doen met wat je daarna met de opgehaalde data doet.

[Currahee]

NMe schreef op zaterdag 27 december 2014 @ 20:50:
En nu moeten we, zonder ook maar iets gezien te hebben van de code die daadwerkelijk misgaat, raden wat je fout doet?

De JSFiddle bevatte reeds de code, maar omdat hier geen ajax call in zat deed het probleem zich inderdaad niet voor. Een voorbeeld met het probleem alhier.

Na intoetsen van een letter verschijnen de via ajax opgehaalde opties. Wanneer het inputveld de focus heeft en je drukt op een pijltjestoets wordt de css toegepast, maar is ook direct weer verdwenen. Wordt de autosuggest van nieuwe waarden voorzien buiten een ajax call om, dan gaat het wel goed.

[Ramon]

Toch niet zo gek? Je zet bij iedere keypress dezelfde twee list-items terug. Je moet de list alleen updaten als er daadwerkelijk iets nieuws in te laden valt (er zijn nieuwe letters in de input gezet + de nieuwe resultaten zijn anders dan de vorige).

[ Voor 55% gewijzigd door Ramon op 27-12-2014 22:20 ]

[Currahee]

Ramon schreef op zaterdag 27 december 2014 @ 22:09:
Toch niet zo gek? Je zet bij iedere keypress dezelfde twee list-items terug. Je moet de list alleen updaten als er daadwerkelijk iets nieuws in te laden valt (er zijn nieuwe letters in de input gezet + de nieuwe resultaten zijn anders dan de vorige).

Dat je je op een gegeven moment zo blind kunt staren op je oplossing en gewoon niet ziet dat je twee keer dezelfde on keydown hebt . Gelukkig is er nog iemand scherp hier, bedankt! Draadje mag dicht.

[RobIII]

Currahee schreef op zaterdag 27 december 2014 @ 22:23:
bedankt! Draadje mag dicht.

Een slotje is niet nodig op een topic als je je oplossing hebt. Zie daarvoor ook onze faq betreffende topiceinde