Recherche de type Autocomplete (JQuery ou YUI) combiné avec Select
Bonjour,
J'ai développé une application dans laquelle il est possible d'aller sélectionner un produit dans une liste d'au moins 5000 items. Bien entendu, j'ai affiché cette liste sous forme de liste de choix SELECT car cela permet de voir textuellement le nom du produit choisi alors que la valeur du champ se réfère à son ID.
Le problème, c'est que les utilisateurs ont parfois peine à trouver le produit qu'ils recherchent dans une aussi longue liste. J'avais alors implanté un champ INPUT auquel j'avais associé la fonctionnalité Autocomplete de JQueryUI, cela cependant enlève aux utilisateurs d'utiliser le mode liste quand ils recherchent un produit au nom semblable (ex : MODULE 1426 vs MODULE 1438).
Finalement, j'en suis venu à un espèce d'hybride. J'ai un objet SELECT qui, lorsqu'on y déclenche l'événement KEYDOWN, tranfère le focus sur un champ INPUT positionné juste aussi dessus et lance l'autocomplete. Je l'ai fait en JQuery ainsi qu'avec YUI, l'Autocomplete de YUI 3 étant beaucoup plus performant. ... Tout fonctionnait très bien jusqu'à dernièrement alors que plusieurs navigateurs ont subi d'importantes mises à jour et que depuis, mon code YUI génère une erreur "Caractère incorrect" que je n'arrive pas à régler.
Je suis donc à la recherche soit d'une astuce pour réparer mon code, soit d'une alternative à ma méthode.
Voici mon code avec YUI 3 (j'utilise YUI et JQuery à la fois) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
var sb = $("SELECT", piece); //Ma objet SELECT existe déjà
var i = $("<input>");
$(i).attr({"type":"text","id":"id_piece_override"+Math.random(),"name":"ac_piece"});
[...]
$(piece).append(i);
$(sb).bind("keydown", function(e) {
//Reçoit un tableau en JSon avec des objets {id:id_produit,text:nom}
YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
var ac = new Y.AutoComplete({
inputNode: "INPUT[name=ac_piece]",
source : "jx.php?vmod=Pieces&vfunc=get_AC_pieces&query={query}",
resultTextLocator:"text",
render:false,
alwaysShowList:false,
tabSelect:true,
maxResults:150,
minQueryLength:2,
resultHighlighter:'wordMatch'
});
ac.on("select", function(e, itemNode) {
$("INPUT[name=ac_piece]").css({"background":"transparent"});
var id = e.result.raw.id;
if(!isNaN(id)) {
$(sb).val(id);
$(i).val("");
setTimeout("$('INPUT[name=ac_piece]').val('')", 50); //Fix latence Internet Explorer
$(sb).focus();
$(sb).trigger("change");
}
$(sb).bind("keydown", function(e) {
$("INPUT[name=ac_piece]").css({"background-color":"#FFFFFF"});
$("INPUT[name=ac_piece]").val(String.fromCharCode(e.which));
$("INPUT[name=ac_piece]").focus();
$(this).unbind("keydown");
ac.render();
return false;
});
});
$(sb).bind("keydown", function(e) {
$("INPUT[name=ac_piece]").css({"background-color":"#FFFFFF"});
$("INPUT[name=ac_piece]").val(String.fromCharCode(e.which));
$("INPUT[name=ac_piece]").focus();
$(this).unbind("keydown");
ac.render();
return false;
});
});
}); |
Erreur générée dans IE9 (plus explicite que dans Firebug quoi que tout aussi imprécis)
Code:
1
2
3
4
5
6
|
Ligne: 15
Caractère: 982
Code: 0
Message d'erreur: Caractère incorrect
URL: http://yui.yahooapis.com/combo?3.3.0/build/io/io-base-min.js&3.3.0/build/json/json-parse-min.js |
