Javascript wachten op keyboard input

[Thysiej]

Hallo,

Ik ben bezig met een realtime zoekfunctie met behulp van AJAX. Het idee is dat er een lijst data beschikbaar is waarin kan worden gezocht door middel van een zoekbalk die er boven staat.
Het script wat ik nu heb gemaakt werkt nog niet ideaal: bij elke onkeydown wordt een javascript uitgevoerd dat via AJAX een query laat uitvoeren door een ander PHP bestand, dus wat het probleem is, is dat bij elke letter die de gebruiker invoert het javascript wordt uitgevoerd én het php bestand een query laat uitvoeren. Daardoor worden er ten eerste ontzettend veel overbodige sql queries uitgevoerd en is het javascript ook vrij traag..

Wat mijn idee is, is dus om het javascript te laten wachten met het uitvoeren totdat de gebruiker zijn zoekterm af heeft gemaakt. Ik weet alleen niet goed hoe ik dit het beste aan kan pakken.. Mijn idee was om het javascript 1 seconde te laten wachten tot een nieuwe keyinput, en als die niet komt, het script dan uit te laten voeren. Maar ik heb geen idee hoe ik dit kan doen. Ik heb ook gezocht, maar met ingebakken functies als setTimeout() kwam ik er niet.. Dan kreeg ik praktisch hetzelfde maar dan dat er een pauze van 1 seconde is totdat het javascript wordt uitgevoerd, maar het wordt nog altijd wel even vaak uitgevoerd..

Ik hoop dat jullie me even op weg kunnen helpen hiermee

[daniëlpunt]

Ik zou het ongeveer zo aanpakken : Een timer laten lopen, en die resetten als er iets veranderd aan het textveld. En als de timer > dan een seconde de zoekfunctie laten uitvoeren.

[Thysiej]

Klinkt als een goed idee. Als ik google naar "javascript timer" krijg ik echter alleen javascript countdown timers en dergelijke, zoals valt te verwachten

Kan je me nog een beetje op weg helpen?

[Patriot]

Wat je wilt doen is op een keydown kijken of er een timer is, als die er is meteen stopzetten en vervolgens een nieuwe timer starten. Hoe je timers (js noemt ze timeouts) moet starten kun je vast wel vinden in een tutorial. Ook op w3schools zijn vast wel wat voorbeelden te vinden.

[Thysiej]

Hmm, ik heb even rondgekeken op W3schools en daar heb ik inderdaad een tutorial gevonden.
Nu heb ik er het volgende van gemaakt, waarbij getdatalist de AJAX functie is en SearchTerm de opgegeven zoekterm:

code:

<script language="javascript" type="text/javascript">
function settimer(SearchTerm)   {
    if (timer)  {
        clearTimeout(t);
        setTimeout(getdatalist(SearchTerm),1000);
    } else {
        var t = setTimeout(getdatalist(SearchTerm),1000);
    }
}
</script>

<input type="text" onkeyup="settimer(this.value);" />

Maar dat werkt niet. Wat doe ik verkeerd?

[DanielG]

JavaScript:

if (timer)

Je zet een variabele genaamd 't' maar je controleert op de variabele 'timer'.
Waarschijnlijk klopt dat niet.

//edit:

Ik denk ook dat je je ' var t ' niet in de ' else ' gedeelte moet zetten i.v.m. de scope.

[ Voor 27% gewijzigd door DanielG op 02-09-2008 15:18 ]

[DanielG]

[per ongeluk quote i.p.v. edit]

[ Voor 157% gewijzigd door DanielG op 02-09-2008 15:18 ]

[reddevil]

DanielG schreef op dinsdag 02 september 2008 @ 15:14:

JavaScript:

if (timer)

Je zet een variabele genaamd 't' maar je controleert op de variabele 'timer'.
Waarschijnlijk klopt dat niet.

//edit:

Ik denk ook dat je je ' var t ' niet in de ' else ' gedeelte moet zetten i.v.m. de scope.

Ik weet 't wel zeker... je moet een global gebruiken hiervoor

[Thysiej]

reddevil schreef op dinsdag 02 september 2008 @ 15:59:
[...]


Ik weet 't wel zeker... je moet een global gebruiken hiervoor

..Ik doe me best maar ik krijg het nog niet helemaal voor elkaar.. Nu heb ik volgens mij iets wat niet klopt, tenminste ik heb het vermoede dat het niet klopt:

code:

function settimer(Cvalue)   {
    var t
    if (t)  {
        clearTimeout(t);
        var t = setTimeout(getcourse(Cvalue),1000);
    } else {
        t = setTimeout(getcourse(Cvalue),1000);
    }
}

Dit doet immers precies wat mn probleem is, namelijk 1 seconde wachten en dan alsnog per elke input het script uitvoeren en een query doen..
Maar ik begrijp ook niet helemaal hoe ik zo'n timer moet construeren... Vooral gezien die globale variabele.. Iemand?

[Bozozo]

Zoals gezegd: met een globale variabele. Zoiets:

JavaScript:

        // (addEvent is your favorite crossbrowser addEvent function)
        addEvent(window,"load",init);

        function init() {
            addEvent(document.getElementById("textareaID"),"keydown",handleKeyDown);
        }
        
        var timer = null;

        function handleKeyDown(e) {
            if(timer != null) {
                window.clearTimeout(timer);
            }
            timer = window.setTimeout(doStuff,1000);
        }
        
        function doStuff() {
            timer = null;
            alert("hi");
        }

[learnit]

Dankjewel Bozozo, dat ziet er al beter uit, maar ik krijg het nu nog niet werkend..
Moet ik ook nog een event toevoegen aan het textfield zelf? (dus onkeydown bijvoorbeeld)
Ook als ik het gewoon zo doe als jij het voorbeeld geeft, dus met de alert-functie, wil het niet..
nogmaals bedankt voor je hulp alvast

PS: ik heb op mn werk gepost onder het account van een collega, ik ben een en hetzelfde dus

[Bozozo]

Dat event wordt op regel 5 toegevoegd. Vergeet niet de juiste ID in te vullen daar. En gebruik je een goede addEvent functie?

[ Voor 62% gewijzigd door Bozozo op 02-09-2008 19:16 ]

[learnit]

Ik heb exact jouw hele functie gekopieërd om te kijken of dat zo 'kaal' zou werken, en ook het ID veranderd:

code:

<blablabla>
<script>
        // (addEvent is your favorite crossbrowser addEvent function)
        addEvent(window,"load",init);

        function init() {
            addEvent(document.getElementById("textareaID"),"keydown",handleKeyDown);
        }
        
        var timer = null;

        function handleKeyDown(e) {
            if(timer != null) {
                window.clearTimeout(timer);
            }
            timer = window.setTimeout(doStuff,1000);
        }
        
        function doStuff() {
            timer = null;
            alert("hi");
        }
</script>
<blablabla />
<input type="text" name="textfield" id="textareaID" />

[Bozozo]

addEvent is geen standaard functie. Je moet nog zoiets definiëren:

JavaScript:

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}

bron