Archief - Live Search

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
T

TiM007

Legacy Member
Weet er iemand hoe ik het volgende moet implementeren:

Heb een webpagina met een overzicht van reizen, opgebouwd in divs met daarin een div klasse search (die hidden is met daarin een search string)

Nu wil ik dus door in tekstveld iets te typen dat hij automatisch begint te filteren/zoeken en als ik bijvoorbeeld Bel typ dat ik alle resultaten direct zie verschijnen. Dus de resultaten dat niet van toepassing zijn hidden zetten.

Maar weet niet hoe ik dit moet realiseren.. Met behulp van jQuery wrs?
D

Disa

Legacy Member
Curahee Q zei:
Inderdaad, jQuery gebruiken met ajax requests. En deze moeten aanpassen bij een keyboard event.

jQuery: The Write Less, Do More, JavaScript Library

keyboard -> .keypress() – jQuery API
ajax -> jQuery.get() – jQuery API

Staan voorbeelden onderaan dus dan lijkt het me niet meer moeilijk.
Klik om te vergroten...

Ga wel niet voor ieder keydownevent een HTTP request gaan afvuren ... .
Dat is nergens voor nodig.

Wat iets beter zou zijn is dat je een timertje laat lopen dat iedere 100 a 200ms checkt of de input gewijzigd is en dan een ajax call doen.
U

UnD3RD0G

Legacy Member
Wat je ook kan doen, en performancegewijs niet slecht is is pas na 3 karakters uw eerste request doen, omdat je dan al meteen aanzienlijk minder results hebt waarop je verder zal moeten filteren...
a

adrianhates

Legacy Member
Ik werk met nen timeout die gecleared wordt als ge nen andere keyup doet ( dus bij het gewoon typen zal er geen ajax request gebeuren , enkel als ge 300 ms uw toetsen los laat.

Onderstaande code doet niet direct wa gij vraagt maar toont wel de logica!

Code: 
    //
    // SEARCH BOX USAGE
    //
    var timeout_search = undefined;
    $('.search').bind('keyup',function(){

        if(timeout_search != undefined){
            clearTimeout(timeout_search);
        }

        timeout_search = setTimeout(function(){

            // format data
            var get_media_autocomplete = {
                search  : $('.search').val(),
                action   : 'autocomplete'
            };

            // ajax request
            $.ajax({
                type : "GET",
                url  : "callbacks/library.callback.php"
                data : get_media_autocomplete
                dataType : "text",
                async : true,
                success: function(response) {
                    // perform action
                },
                error: function(response){
                    alert("An error occurred!");
                }
            });
        },300);

        return false;

    });
w

wonko

Legacy Member
een timer is interessanter; dan heb je automatische locking zodat je niet meerdere events gaat sturen voor je andere afgewerkt is. Een extra timeout is ook eenvoudig in te bouwen, zodat je niet te snel info gaat opvragen als iemand nog aan het typen is...
D

Drone

Legacy Member
Reactive Javascript is ook iets interessant. Daarmee kan je queries uitvoeren op streams. Dus bijvoorbeeld een stream van keystrokes, stream van muiscordinaten, etc ... Is misschien niet iets voor de OP maar meer iets voor de JavaScript liefhebbers.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan