Autocompletion, passer de prototype à jquery
Bonjour à tous,
Voila j'utilise pour mon application struts, ibatis, j'ai récemment intégré DWR pour permettre l'auto complétion sur des champs de code postaux.
Mon auto complétion marche nickel, sauf que j'utilise prototype pour celle-ci, ce qui me fait planter certaines autres fonctionnalités car incompatible avec jquery (que j'utilise dans mon template).
J'ai donc cherché et trouvé qu'il existe une librairie sous jquery qui permette de faire ce que je veux aussi, ce qui me permettrait de corriger mon problème d'incompatibilité....
Sauf que, j'arrive pas à l'implémenter ! C'est donc là que j'ai besoin de votre aide :D
Je vous montre ce que j'ai pour l'instant :
ma jsp, ou l'on tape un code postal dans "zipcode", affiche la liste des propositions dans "zipcodelist" et complète la ville "town" lorsqu'on en sélectionne une
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script type='text/javascript' src='<%= request.getContextPath()+ "/dwr/interface/AddressDWRFacade.js"%>'></script>
<script type='text/javascript' src='<%= request.getContextPath()+ "/dwr/engine.js" %>' ></script>
<script type='text/javascript' src='<%= request.getContextPath()+ "/dwr/util.js" %>' ></script>
<script type='text/javascript' src='<%= request.getContextPath()+ "/custom/script/module/autocomplete/prototype/prototype.js"%>'></script>
<script type='text/javascript' src='<%= request.getContextPath()+ "/custom/script/module/autocomplete/script.aculo.us/controls.js"%>'></script>
<script type='text/javascript' src='<%= request.getContextPath()+ "/custom/script/module/autocomplete/script.aculo.us/effects.js"%>'></script>
<script type='text/javascript' src='<%= request.getContextPath()+ "/custom/script/module/autocomplete/autocomplete.js"%>'></script>
<script type='text/javascript' src='<%= request.getContextPath()+ "/custom/script/module/autocomplete/jquery.autocomplete.js"%>'></script>
<html:text name="ContactForm" property="address.zipcode" size="10" maxlength="32" styleId="zipcode" onblur="confirmZipcode();" />
<html:img page="/custom/script/images/loading.gif" border="0" alt="Loading" styleId="loadingZipcode" width="18" height="18" style="display: none ;" />
<div id="zipcodeList" class="auto_complete" style="position: relative;"></div>
<jsp:include flush="true" page="/custom/script/module/event/townParam.jsp"></jsp:include> |
le fichier paramTown avec le code javascript
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
|
function updateZipcode<%= param %>List(autocompleter, token)
{
document.getElementById('loadingZipcode<%= param %>').style.display = 'inline' ;
AddressDWRFacade.getAllTownsWithZipcode(token, function(data) { autocompleter.setChoices(data) ;
document.getElementById('loadingZipcode<%= param %>').style.display = 'none' ; });
}
function zipcode<%= param %>ValueSelector(tag)
{
return tag.zipcode + " " + tag.town + " " + tag.id ;
}
function confirmZipcode<%= param %>()
{
document.getElementById('loadingZipcode<%= param %>').style.display = 'inline' ;
var searchString = DWRUtil.getValue('zipcode<%= param %>');
if(searchString.lastIndexOf(' ') == -1 )
AddressDWRFacade.getTownWithZipcode(searchString,fillTown<%= param %>);
else
AddressDWRFacade.getTownWithId(searchString.substr(searchString.lastIndexOf(' ')+1, searchString.length),fillTown<%= param %>);
}
function fillTown<%= param %>(aTown)
{
if(aTown != null)
{
document.getElementById('zipcode<%= param %>').value = aTown.zipcode ;
document.getElementById('town<%= param %>').value = aTown.town ;
}
document.getElementById('loadingZipcode<%= param %>').style.display = 'none' ;
}
new Autocompleter.DWR('zipcode<%= param %>', 'zipcode<%= param %>List', updateZipcode<%= param %>List,{ valueSelector: zipcode<%= param %>ValueSelector, partialChars: 0}); |
si quelqu'un peut m'aider, merci
si j'ai pas été assez précis, hésitez pas....
