Verbetertips zodat mijn auto-suggest ook bij trage pc's goed werkt
Mijn vraag is kort samengevat: hoe moet ik mijn code aanpassen zodat mijn autosuggest bij https://www.miyukibeading.com/test-upload/# een limiet aan suggesties heeft, zodat het ook bij trage pc's goed kan werken?
Uitleg:
Ik ben pagina's aan het maken zodat leden foto's van hun zelfgemaakte creaties kunnen uploaden en daarbij precies aangeven welke kleuren zijn gebruikt van de Miyuki kralen (een Japanese merk), zodat bezoekers ook op kleurnummers kunnen zoeken (zie bijvoorbeeld https://www.miyukibeading.com/colors-gallery/?colorcode=DB-10&color=&designer=&technique=&s= ). Deze kleuren hebben bijvoorbeeld nummer DB-10, maar sommigen hanteren eerder DB0010, vandaar dat ik zeker wil maken dat het altijd op dezelfde manier ingevuld wordt.
Ik gebruik een jquery script die ik had gevonden, dit werkt goed maar gaat te langzaam bij sommige bezoekers. Ik denk dat de traagheid komt omdat het om 5.164 records gaat, stel je typed 11- dan komt er een lijst van 1.040 artikelen. Wellicht gaat het stuk beter als er een limiet is aan aantal suggestjes. Hoe zou ik jquery het beste kunnen aanpassen zodat hij bijvoorbeeld max 10 suggesties toont?
Zoals de script nu werkt is de pulldown vooral suggestie, je kan ook gewoon doortypen. Ik wil graag de pulldown zodat de bezoekers een standaard formaat selecteren, bijvoorbeeld DB-10, en dat ze niet zelf bijvoorbeeld db0010 typen.
Als iemand een hele andere idee heeft hoor ik het ook graag, zolang er ongelimiteerde aantal ingevuld kan worden en automatisch suggestie zodat het in juiste formaat ingevuld wordt (of ik zou achteraf controle moeten doen maar geeft teveel risico denk ik, sommigen vullen bijvoorbeeld alleen kleurnummer in (401 ipv 11-401) of bijvoorbeeld db 10 (dus niet aan elkaar), etc.
Alvast bedankt!
Als ik afga op het eerste resultaat wat ik zo snel kan vinden heeft de autocomplete ui zelf geen limitering voor het maximaal aantal resultaten maar daar wordt dus een workaround gebruikt waarbij eerst alle resultaten worden opgehaald, en dan worden afgekapt. De vraag is (dan) dus of de vertraging zit in het filteren van de resultaten of het renderen ervan. Als de vertraging in het renderen zit dan zou dit een oplossing kunnen zijn.
Mijn PC is dan enigszins gedateerd, maar is nog steeds redelijk high-end, en deze zoekfunctionaliteit doet mijn webbrowser ook bevriezen, dus ik denk eigenlijk dat zoals het nu werkt het eigenlijk sowieso niet echt lekker werkt :p.
Wat je ook zou kunnen doen (naast het afkappen van resultaten) is de delay wat ophogen en de minLength minimaal op 1 (of wellicht 2) instellen. Als je nu namelijk een eerder ingetypte selectie weer uitwist worden *alle* resultaten opgehoest, en dat duurt nog wat langer :). Dit zorgt ervoor dat er minder snel begonnen wordt met daadwerkelijk zoeken en dat zou ook kunnen resulteren in (in ieder geval voor het gevoel) snellere zoekfunctionaliteit.
@Ariën view source :).
Gewijzigd op 01/05/2019 15:35:30 door Thomas van den Heuvel
https://www.creadream.nl/kralen/
Zo ja, waarom dan niet de kleur met vinkjes aangeven.
Ik zie daar ook dat bij een selectie van kleuren, ook een selectie over blijft voor type, maat, vorm en rijggat.
Ik heb de delay en minLength toegevoegd. De 1ste link die je gaf geeft idd duidelijk uitleg hoe je toch 'n limiet kan instellen, dus dat is nu ook gelukt, hij geeft max 10 suggesties. :-D Dit zal al veel schelen qua snelheid denk ik, zie eventueel https://www.miyukibeading.com/test-upload/ .
@Arien: voor het gemak plak ik hier de code, de data bij var availableTags heb ik even flink ingekort, in het echt wordt er daar via PHP data uit database opgevraagd en geeft het dan een array van meer dan 5000 records.
<script>
$( function() {
var availableTags = [
"11-1","11-1F","11-2" ];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.on( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
delay: 500,
minLength: 2,
source: function( request, response ) {
var results = $.ui.autocomplete.filter(availableTags, extractLast(request.term));
response(results.slice(0, 10));
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
} );
</script>
Bij mijn iMac werkt het nog net zo snel als eerst ;-) maar ik zal het laten testen vanaf trage laptop, en als jullie nog verbetertips heb hoor ik het graag.
Nogmaals bedankt voor de snelle en duidelijke reactie.
Toevoeging op 01/05/2019 16:18:01:
PS: Ik loop alleen risico dat de gebruikers soms gewoon doortypen, dus niet via pulldown selecteren, en ze dan dus wel in andere 'formaat' doorgeven, waardoor je bijvoorbeeld een string zoals
DB-10, 11-401 db020 krijg
Zodra gesubmit doe ik namelijk dit met de kleurnummers:
if(substr($_POST['used'],-2)!=', ')
$_POST['used'] .= ", ";
$colors = explode(", ", $_POST['used']);
$total_colors = count($colors)-1;
if($_POST['used']!="" && $total_colors==0)
$total_colors = 1;
for($n=0;$n<$total_colors;$n++) {
//hier komt dan de insert query om kleur voor kleur op te slaan
}
Mochten jullie nog tips hebben wat ik eventueel kan doen om dit te voorkomen / op te vangen hoor ik het graag. Enige dat ik kan bedenken is dat als ie alle kleuren afgaat en 1 daarvan erg lang lijkt te zijn, dat ie dan waarschuwing geeft dat het in bepaalde formaat ingevuld moet worden.
Toevoeging op 01/05/2019 16:27:23:
Adoptive Solution op 01/05/2019 16:01:04:
Is deze website ook van u?
https://www.creadream.nl/kralen/
Zo ja, waarom dan niet de kleur met vinkjes aangeven.
Ik zie daar ook dat bij een selectie van kleuren, ook een selectie over blijft voor type, maat, vorm en rijggat.
https://www.creadream.nl/kralen/
Zo ja, waarom dan niet de kleur met vinkjes aangeven.
Ik zie daar ook dat bij een selectie van kleuren, ook een selectie over blijft voor type, maat, vorm en rijggat.
Deze webshop is idd van mij, deze zoekfilter keer door iemand laten programmeren. Ik ben nu bezig met een wordpress site. Ik snap je idee, kleuren kan je idd selecteren (zie https://www.miyukibeading.com/upload-test/ , dit is mijn complete formulier, zonder definitief opslaan en zonder controle of ingelogd), maar kleurnummers daar zijn er duizenden van bij de Japanse merk Miyuki. Ik had wel al de neiging de lijst compleet te maken en alleen via pulldown te kunnen doen, maar het wordt lastig om werkelijk alle beschikbare artikelnummers te krijgen (ze hebben ook andere vormen kralen dus andere artikelnummers). Sommigen hanteren andere artikelnummers, bv DB0010 ipv DB-10 of 11-0401 ipv 11-401, en dat wil ik voorkomen zodat 1) de zoekformulier linksboven bij https://www.miyukibeading.com/colors-gallery/ goed werkt (wil niet en DB0010 en DB-10 bij de lijst) en 2) anders kan ie met huidige code niet goed de gebruikte kleuren tonen bij zoom-pagina (zie bijvoorbeeld https://www.miyukibeading.com/zoom/?id=24 en dan onderaan Used Miyuki colors)
https://www.miyukibeading.com/miyuki-catalog/
zijn de kleuren in groepen verdeeld.
Is het dan niet handig om eerst een groep te kiezen en in een nieuw menu een sub-kleur.
Ongeveer zoals hier.
http://adoptive.2kool4u.net/dynamic_select/
Als je dan 1 kleur overhoudt, voeg je die toe aan een lijst en kies je uit de menus opnieuw een kleur.
Voorbeeld van dynamisch toevoegen regel :
https://bootsnipp.com/snippets/402bQ
Een item of alle items in de lijst kan je ook verwijderen.
Een lijst moet dan minimaal 1 kleur hebben.
Vervolgens stuur je de afbeelding met het lijstje kleuren naar de server en verwerk je die.