Select tag en lijst

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan R

Jan R

12/02/2024 19:58:18
Quote Anchor link
Hoi

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
 
PHP hulp

PHP hulp

26/02/2024 21:48:35
 
Ad Fundum

Ad Fundum

12/02/2024 20:46:20
Quote Anchor link
Ik kan niet goed opmaken wat je wilt weten.

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
 
Jan R

Jan R

13/02/2024 06:39:58
Quote Anchor link
Ik heb niet geschreven dat ik van input gebruik maak. Wel dat je daar een list kan aan hangen. (off topic ik gebruik het wel voor standaard opmerkingen en kiezen van een basiskleur)

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
 
Ad Fundum

Ad Fundum

13/02/2024 20:47:50
Quote Anchor link
Dus je gebruiker vult dus een aantal waarden in, en op basis van die waarden vul je de <select> tag(s) met <option>s ?

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.
 
Jan R

Jan R

14/02/2024 07:46:31
Quote Anchor link
Uw json oplossing was ook iets waar ik al aan het denken was :) Ik doe dit nu ook al voor de namen. Een array met key=id en waarde de naam. Dus vandaar.

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.