Ecommerce Patch Autosuggest jQueryUI filtrare su invio voce suggerita

Ecommerce Patch Autosuggest jQueryUI filtrare su invio voce suggerita


Ultimamente stiamo montando sui nostri ecommerce la funzionalità di autosuggest per suggerire nella ricerca libera i prodotti mentre digitiamo.
In quasi tutti i casi ci piace montare l'autosuggest della libreria jQueryUI.


Vi riporto qui qualche esempio live:

antiagingclub.it

yousporty.com

shopsundek.com

nencinisport.it

Un problema comune montando la libreria standard come si trova sul demo del sito della jQueryUI, è che l'autosuggest non fa partire il filtraggio sul click con il mouse sopra la voce, ne premendo una volta sola invio.

In questo modi infatti viene selezionato il testo nella casella di testo, ma per far partire il filtraggio occorre ricliccare invio oppure premere il bottone/icona cerca.

Ieri un cliente ha richiesto che facessimo una patch al comportamento standard, e che partisse il filtraggio dell'autosuggest al primo invio oppure al click del mouse.

Abbiamo fatto una modifica al codice sul sito yousporty.com e il risultato su traduce in una maggiore velocità di filtraggio e il controllo autosuggest risulta cosi molto più user friendly per l'utente.

Qui in questo video potete vedere la differenza di comportamento in azione su due nostri ecommerce:

Infine per i programmatori, ho deciso di condividere sul web questa semplice patch che però penso risulterà utile a qualcuno.

Questo è il codice per inserire l'autosuggest classico:

$(".PdsAutosuggest").autocomplete({
  delay: 1,
  minLength: 3,
  source: function( request, response ) {
   lastSearch_sitesearch=request.term;
   if ( request.term in cache_sitesearch )
   {
    response( cache_sitesearch[ request.term ] );
   }else{
    $.ajax({
     url: "/autosuggest.php",
     dataType: "json",
     data: request,
     success: function( data ) {
      cache_sitesearch[ request.term ] = data;
      response( data );
     }
    });
   }
  }
});

Questa invece la patch che fa si che quando si clicca la voce suggerita con il mouse o si seleziona con la tastiera e si preme invio parte subito il filtraggio:

$('.PdsAutosuggest').bind('keyup',function(event){
     if (event.keyCode==13)
     {
         $('#PdsSearch').submit();
     }
 });

In pratica, non si fa altro che gestire l'evento "keyup" del textbox dell'autosuggest, in maniera tale che se il tasto premuto è l'invio su esegue il submit del form.
E' necessario gestire l'evento keyup in quanto l'autosuggest gestisce l'altro evento di pressione tasto che occorre prima temporalmente e quindi durante l'esecuzione del l'evento keyup, il valore nel testxbox è già stato riempito dal click sulla voce suggerita.


Spero che a qualcuno serva di aiuto.