Blog de Keran

La librairie de jQuery Autocomplete est, comme souvent pour ces plugins, rapide à implémenter et très robuste. Par contre quand il s’agit d’agrémenter le Js d’un dev spécifique, le chemin paraît d’un coup beaucoup plus long.

J’ai eu le problème avec ce plugin. Il ne gère pas le clic externe sur un bouton. Résultat si rien n’a été spécifié par l’utilisateur (clic de la liste, touche entrée, tab) le librairie ne récupère pas automatiquement le premièr élément de la liste.

Pour corriger ce soucis, passez le JS au beautifier pour le rendre lisible.

Ensuite, dans la zone de création des méthodes associée au plugin (flushcache, search, result,…) ajoutez le bloc suivant:

}).bind(« flushCache », function () {
cache.flush();
}).bind(« getSel », function ()
{
if (selectCurrent() )
{
blockSubmit = true;
return false;
}
else
searchFunc($(« #input_recherche »).val(), »);
}).bind(« setO

Cette nouvelle méthode permettra donc de récupérer la sélection courante, comme si l’utilisateur appuyait sur la touche « entrée ».

Voici une implémentation possible:

//Initialisation

$().ready(function() {

$(« #input_recherche »).autocomplete(‘chemin_vers_script_php_par_exemple_qui_renvoie_liste’, {
width: 500,
scrollHeight: 500
});
//Lors d’une recherche

$(« #input_recherche »).result(function(event, data, formatted) {

if (data)
{
$(‘#champ_hidden’).val(data[1]);
searchFunc(data[0],data[1]);
}
else
{
//Si pas de valeur prend la ligne sélectionnée
$(« #recherche »).getSel();
}
});
});

function searchFunc(txt,id)
{
//votre appel après submit (ajax ou url)
}

//pour bien gérer tous les cas, dès que l’utilisateur tape sur entrée après entrée un valeur inconnu du suggest, lr submit est malgré tout activé
$(window).keypress(function(e) {
if(e.keyCode == 13 ) {
searchFunc($(« #input_recherche »).val(), »);
}
});

Pour aller plus loin

Cette dernière fonction pose problème s’il y a plusieurs champs input dans la page; résultat sur un autre champ, après avoir appuyé sur la touche entrée, le submit est activé. Pas terrible. Pour améliorer ça on peut ajouter un test à la fonction ci-dessus:

$(window).keypress(function(e) {
if(e.keyCode == 13 && focField == ‘input_recherche’ ) {
searchFunc($(« #input_recherche »).val(), »);
}
});

Et pour remplir focField à l’initialisation de la page:

focField        =     »;

listeInput            =    document.getElementsByTagName(‘input’);
if(listeInput.length > 0)
{
for (i = 0 ; i < listeInput.length ; i++)
{
if(listeInput[i].type == ‘text’)
listeInput[i].onfocus = function(){
focField = this.id;
}
}
}

ainsi dès qu’un input est cliqué (focus) la variable focField stocke le nom de ce champ.