Select tag en lijst
Bij input kan je een list maken en dan ook kiezen.
Ik gebruik echter een select tag om waarden te kiezen. Nu heb ik meerdere mogelijkheden(option) en ik haal deze op via javascript met een XMLHttpRequest. Dat is soms traag
1. Waarom geen list bij select?
2. Alternatieven?
Jan
Je gebruikt een <input type="text"> in combinatie met een <datalist> tag, en dat gaat goed. Maar om de een of andere reden maak je daar geen gebruik van, je maakt gebruik van een <select> tag met <options>. Ik gok dat je een <select> boven een <input> verkiest omdat je met een <select> een gecontroleerde lijst hebt, terwijl met <input> iedereen alles kan invullen. Uiteindelijk moet het toch nog op de server gecontroleerd worden bij het insturen van het HTTP-verzoek, dus we moeten dat niet te zwaar laten wegen.
De <option> tags voor de <select> haal je op via een XHR-verzoek, en je vindt dat (terecht) soms traag.
Hoe vaak haal je data op via XHR? Met welk doel doe je dat via XHR? Wil je een gecontroleerde of ongecontroleerde lijst waaruit gekozen kan worden? Moet er een filterfunctie bij, zodat je kan typen net zoals bij een <input> veld?
Gewijzigd op 12/02/2024 20:48:33 door Ad Fundum
Het ophalen van de gegevens gebeurd wanneer de gebruiker de uitslagen invult. 2 tot 3 keer per week 0 tot 5 uitslagen per keer. Deze zijn echter afhankelijk van welk toernooi en daardoor wijzigen deze. Vroeger was er maar 1 actieve keuze. nu max 5 keuzes met een 10-tal options met optgroup. Ik doe al een controle of de laatst opgehaalde mogelijkheden overeenkomen met de nieuwe dan is het ook niet nodig om dezelfde gegevens op te halen.
Ik zocht echter ook verder en kwam <template> tegen. Daarmee kan ik ook via javascript de opties "inladen" en dat is sneller omdat ze niet van de server moeten haalt worden.
Als er andere of betere methodes zijn lees ik het graag.
Jan
Voor een dergelijk scenario zijn meerdere alternatieven.
De meest voor de hand liggende is om het scherm op te splitsen in meerdere stappen, als wat ze vroeger een 'wizard' noemden.
Als je toch een dynamisch formulier wilt, kan je het beste er voor zorgen dat het invullen van een gegeven alleen gevolgen heeft voor de volgende waarde(n).
Als je alleen een <select> wilt filteren aan de hand van een <input> (als een combinatie van de twee, voor een gecontroleerde trefwoordenlijst) is Javascript nodig want zo'n HTML-element bestaat helaas niet.
Wil je de performance opkrikken, laad dan alle mogelijke combinaties van te voren in via XML of JSON. Je kunt het opslaan in een Javascript variabele, maar het is ook mogelijk om een SQL web database in de browser te beginnen met de Web Storage API: https://www.w3schools.com/html/html5_webstorage.asp
Je kunt de XMLHttpRequest of Fetch API ook voorbij met Web Sockets, dan kan je met de applicatieserver praten via sockets, dat gaat veel sneller omdat er niet elke keer een HTTP-request voor nodig is waar een flinke vertraging op kan zitten: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
En als alles te traag gaat kan je je applicatieserver asynchroon maken: https://amphp.org/
Of Javascript vervangen voor gecompileerde code via Web Assembly, dan draait de front-end op 'native speed' (maximale snelheid).
Maar als ik jou was zou ik beginnen met alles in 1x binnenhalen via JSON en eventueel iets met de Web Storage API proberen.
Het komt echter op min-of-meer hetzelfde uit als de template te wijzigen, welke ik ook op voorhand kan inladen. Nu even de performantie bekijken van beide mogelijkheden en dan zie ik wel.
Wel bedankt voor het meedenken.
Jan