Bonjour,
J'aimerais arrivé a faire un méthode globale pour pas devoir refaire deux fois le code (evité le code redondant) mais je ne sais pas comment faire...
<script type="text/javascript"> function lookup(inputString) { if(inputString.length == 0) { // si le champs txte est vide $('#suggestions').hide(); // on cache les suggestions } else { // sinon $.post("ajax.php", {queryString: ""+inputString+""}, function(data){ // on envoit la valeur du champ texte dans la variable post queryString au fichier ajax.php if(data.length >0) { $('#suggestions').show(); // si il y a un retour, on affiche la liste $('#autoSuggestionsList').html(data); // et on remplit la liste des données } }); } }
function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée if(thisValue){ $('#inputString').val(thisValue); setTimeout("$('#suggestions').hide();", 200); } }
$(document).ready( function () { $("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString lookup($(this).val()) ; });
$("input#inputString").blur( function() { // si le champs texte perd le focus fill(false); }); }); </script>
<input type="text" size="30" value="" id="inputString" /><!-- champ texte à analyser pour les suggestions --> <div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions --> <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <!-- image de la fleche vers le haut --> <div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions -->
</div> </div>
<input type="text" size="30" value="" id="inputString2" /><!-- champ texte à analyser pour les suggestions --> <div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions --> <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <!-- image de la fleche vers le haut --> <div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions -->