" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: "search.txt",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value :
"Nothing selected, input was " + this.value );
}
});
});
On peut noter que dans cette exemple on paramètre une action lors de la sélection d'un élément dans la liste affichée.
Si cette exemple est simple il pose deux problèmes majeurs:
- la liste est fixe et ne tient pas compte des caractères déjà frappé.
- il n'est pas possible lors de la sélection d'avoir accès à d'autres informations de la liste
On peut modifier le code afin de résoudres ces problèmes via l'utilisation d'un serveur qui va fournir une liste au format
*json* suivant les caractères frappés
exemple de liste retournée après la frappe de "ar"
::
[
{"label" : "Aragorn", "id" : "ara"},
{"label" : "Arwen", "id" : arw}
]
modification du code javascript
.. code-block:: javascript
$(function() {
function log( message ) {
$( "
" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "states_remote.php",
dataType: "json",
data: {term: request.term},
success: function(data) {
response($.map(data , function(item) {
return {
label: item.label,
id: item.id
};
}));
}
});
},
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " with id " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
.. note::
il existe en python un module json qui permet de générer facilement ce format
.. code-block:: python
>>> import json
>>> print json.dumps({'4': 5, '6': 7}, sort_keys=True,
... indent=4, separators=(',', ': '))
{
"4": 5,
"6": 7
}