Amélioration ergonomie liste des produits ajax

Utiliser mon Dolibarr
1

Bonjour,

Lorsqu’ajax est activé, on obtient un champ texte qui permet d’actualiser une liste déroulante avec les produits/services correspondants.

Je ne trouve pas cela très ergonomique, car on ne voit pas les résultats en cours de saisie (difficile si on fait plusieurs tentative de recherche).

A mon sens on gagnerait en ergonomie avec quelque chose à la Google Suggest : les résultats s’affichent automatiquement dans une liste visible en permanence pour laquelle il suffit de descendre avec la flèche bas pour sélectionner le produit voulu.

J’espère la remarque utile !
Cordialement,

2

j’ai voulu mettre ca en place, le souci c’est que je ne suis pas très calé en ajax et la fonction que j’ai pour créer une autocomplétion de ce style ne permet pas d’envoyer plusieurs variable en POST ou GET, du coup comme cette liste à besoin de plusieurs variable pour s’afficher j’ai laissé comme c’était.

si tu as une solution je suis preneur :smiley:

3

Est ce que quelque chose comme cela pourrait t’aider ?
Sur Dolibarr, je ne suis pas au point, et bien que je ne sois pas (encore) un cador en ajax, je devrais pouvoir t’aider dessus avec mes modestes compétences !

Voici un bout de script que j’utilise par ailleurs :

Voici le javascript :

[code:1]
<script language="JavaScript" type="text/javascript">

//On crée l’objet XmlHttpRequest
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject(« Microsoft.XMLHTTP »);
} else {
alert(« Votre navigateur est vraiment très vieux!\nPour utliser pleinement les suggestions de recherche, merci de faire une mise à jour. »);
}
}

var searchReq = getXmlHttpRequestObject();

//à appeller sur l’événement keyup du champ de recherche (requete ajax)
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = escape(document.getElementById(‹ txtSearch ›).value);
// C’est ici que l’adaptation Dolibarr devrait se faire
searchReq.open(« GET », ‹ searchSuggest.php?search= › + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}

//Appellé pour le retour de la réponse Ajax
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById(‹ search_suggest ›)
ss.innerHTML = ‹  ›;
var str = searchReq.responseText.split("\n");
for(i=0; i < str.length - 1; i++) {
//Contruction de la chaine (sans DOM, problèmes avec IE)
var suggest = '<div onmouseover=« javascript:suggestOver(this); » ';
suggest += 'onmouseout=« javascript:suggestOut(this); » ';
suggest += 'onclick=« javascript:setSearch(this.innerHTML); » ';
suggest += ‹ class=« suggest_link »> › + str[i] + ‹ </div> ›;
ss.innerHTML += suggest;
}
}
}

//Mouse over
function suggestOver(div_value) {
div_value.className = ‹ suggest_link_over ›;
}
//Mouse out
function suggestOut(div_value) {
div_value.className = ‹ suggest_link ›;
}
//Click
function setSearch(value) {
//Ici la valeur à afficher
document.getElementById(‹ txtSearch ›).value = value;
document.getElementById(‹ search_suggest ›).innerHTML = ‹  ›;
//Ici l’ID pour Dolibarr (à voir comment remplacer ‹ bonjour ›, selon comment on récupère l’info).
document.getElementById(‹ ref ›).value = ‹ bonjour ›;
}
</script>
[/code:1]

Pour le champ du formulaire :

[code:1]<input type="text" name="keywords" id="txtSearch" onkeyup="searchSuggest();" size="10" maxlength="30" ><div id="search_suggest"></div><input type="hidden" name="ref" value="" id="ref">[/code:1]

Enfin, dans la feuille de style :

[code:1]
.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
#search_suggest {
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}
[/code:1]

Ceci permettrait de remplir le champ de recherche avec le produit/service et avoir un champ caché avec l’id pour Dolibarr.

Ce script est à améliorer, car le fin du fin serait de pouvoir utiliser les flèches du clavier comme Google Suggest.
Si ce code t’es utile, je veux bien me pencher sur cette histoire de flèche.