venerdì 30 maggio 2014

Jquery autocomplete, modificare la struttura del passaggio delle variabili via GET

Jquery autocomplete é molto utile, ma il metodo standard che viene usato per passare la variabile con le lettere da cercare non sempre va bene, specialmente se si utilizza un sistema MVC.
jQueryAutocomplete

Il codice di default invia una variabile tramite GET alla pagina search.php

quindi:

search.php?term=ab

ipotizzando di aver scritto le lettere 'ab' nel form.

Se si utilizza un sistema di rotte, potrebbe essere necessario modificare il sistema per inviare la variabile.

creando qualcosa del genere

search/ab
Per fare questo bisogna utilizzare la funzione $.getJSON in source:

quindi aggiungere al posto di search.php

function(req, resp) {
    $.getJSON("search/" + encodeURIComponent(req.term), resp);
}


 Il codice finale dovrebbe essere questo:

<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: function(req, resp) {
    $.getJSON("search/" + encodeURIComponent(req.term), resp);
  },
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>

Nessun commento:

Posta un commento