[JS] Select vullen met veel items

[McVirusS]

Ik heb dit probleem al eerder gehad maar heb er op dit moment genoeg last van om er een topic over te openen.

Ik ben bezig met een CMS te maken maar bepaalde data kwam vrij vaak voor waardoor sommige beheerpagina's richting de 100 a 200 K gingen.

Dus ik een JS oplossing bedacht; data in een JS-array in een hiddenframe en zo dynamisch SELECT-box vullen. Werkt op zich perfect, maar 1 van die arrays is dus iets van 3000 items groot, als je dan een selectbox wilt vullen hangt je browser gewoon 10-55 seconden (ligt aan snelheid van je PC) en eigenlijk is dit absoluut niet de bedoeling natuurlijk.

Collega (VB programmeur) zei dat het kwam doordat IE bij elke verandering index opnieuw aan moet maken. Op zich is dit niet zo'n hele gekke verklaring aangezien scriptje aan eind van de array er naar verhouding veel langer over doet dan in het begin.

Had al geprobeert om na 100 items elke keer 500ms te pauzeren of iets dergelijks, op zich verhelpt dit wel voor een deel het hangen maar het werkt alsnog niet echt soepel (lees: het werkt niet).

Mijn vraag is; is er iets aan het hangen van browser te doen? Of heeft iemand een andere geniale oplossing?

[McVirusS]

Ohja, aub geen opmerkingen over dat een select met 3000 items niet gebruiksvriendelijk is want daarvoor heb ik al een oplossing .

[drm]

Zou je ook ff de source kunnen posten?

edit:

McVirusS:
Ohja, aub geen opmerkingen over dat een select met 3000 items niet gebruiksvriendelijk is want daarvoor heb ik al een oplossing .

[Bosmonster]

Ik heb ergens eens gelezen dat er 3 verschilende manieren zijn om een selectbox te vullen.. een ervan ruim de snelste in vergelijking met de anderen. Met new Option was in ieder geval de langzaamste kan ik me herinneren.. Via DOM ging het al een stuk sneller om gewoon in 1 maal de complete content tussen de <select> tags te plakken.

Maar goed.. heb je al nagedacht over het feit dat een selectbox met 3000 items uberhaupt niet echt gebruikersvriendelijk is? Misschien is een onderverdeling maken ook extra mogelijkheid

edit:

ow.. je wist al dat het niet gebruikersvriendelijk was

[Bosmonster]

Ow check hier, dit is de tip van Microsoft zelve:

http://support.microsoft....px?scid=KB;EN-US;Q255610&

(React ken de URL weer niet aan..)

[McVirusS]

JavaScript:

var tmp = 0;
perkeer = 50;
pauze = 250;

function vulMedia() {
    tmp++;
    media_select = vulMedia.arguments[0];
    media_defaultWaarde = vulMedia.arguments[1];

    if (vulMedia.arguments.length > 2) {
        start = vulMedia.arguments[2];
        tot = perkeer + nr;
    } else {
        media_select.options[0].text = "Laden...";
        media_select.options[0].value = "";

        start = 0;
        tot = perkeer;

        legeopties = 1;
        media_select.options.length = legeopties;

        startTime = new Date();
    }   
    
    nr = media_select.options.length;

    i = 0; 
    for (arKey in media) {
        if (i < tot && i >= start-legeopties) {
            media_select.options.length += 1;
            media_select.options[nr].value = arKey; 
            media_select.options[nr].text = media[arKey];

            if(arKey == media_defaultWaarde) media_select.options[nr].selected = true;
            nr++;           
        } else if (i >= tot) {
            betweenTime = new Date();
            window.status = Math.round((betweenTime.getTime()-startTime.getTime())/tmp)+' ms';
            mediaTimeout = setTimeout("vulMedia(media_select,media_defaultWaarde,nr)",pauze);
            break;
        }
        i++;
    }

    if (media_select.options.length-legeopties == media_length) {
        media_select.options[0].text = "";
        media_select.options[0].value = "";

        endTime = new Date();
        runningTime = endTime.getTime() - startTime.getTime();

        parseTimeMsg = "Parsetime: "+runningTime+" ms";
        window.status = parseTimeMsg;
    }
}

Dit is omgebouwde code al (dus met die vertraging erin).

[McVirusS]

Met createElement & appendChild is het wel iets sneller maar nog steeds traag...moet nog methode van Bosmonster proberen (string samenstellen)..zou op zich misschien wel moeten werken.

[McVirusS]

Dit is vele malen sneller inderdaad, dank je wel Bosmonster

JavaScript:

function generateMedia() {
    var optStrings = new Array();
    for (arKey in media) {
        optStrings[optStrings.length] =  '<option value="' + arKey + '">' + media[arKey] + '</option>\n';
    }
    return optStrings.join();
}