Auto completion sur champs texte--------------------------------
Url : http://codes-sources.commentcamarche.net/source/41154-auto-completion-sur-champs-texteAuteur : ryosamaDate : 07/08/2013
Licence :
=========
Ce document intitulé « Auto completion sur champs texte » issu de CommentCaMarche
(codes-sources.commentcamarche.net) est mis à disposition sous les termes de
la licence Creative Commons. Vous pouvez copier, modifier des copies de cette
source, dans les conditions fixées par la licence, tant que cette note
apparaît clairement.
Description :
=============
Voici un code qui permet d'intégrer un champs texte qui se complèt
e automatiquement (via Ajax) au fur et à mesure de votre saisie.
U
n bout de code PHP va chercher une liste de valeur (base SQL, repertoires, fichi
ers, XML, Pages Web, etc ...) et la renvoi à la page web qui vous propose
une completion en rapport avec votre saisie.
Démo visible
ici : http://www.coopmcs.com/demo/completion/completion.html
Source / Exemple :
<html>
<head>
<title>Auto complete (auto
completion)</title>
<!-- appel du script d'auto completion -->
<
;script language="JavaScript" src="completion.js"></sc
ript>
<script language="JavaScript">
<!--
// nombre
de caractere minimum à tapé avant de lancer la recherche Ajax
var minimum_cara
ctere = 1;
// on se moque la hauteur de case
var case_sensitive = 0 ;
//
-->
</script>
</head>
<body>
<br><br><
br>
<!-- debut du code HTML -->
<!-- déclaration du formulaire -
->
<form name="completion_form" method="POST" action=
"une_action.html">
<!-- obliger de laissé un autre champs tex
t invisible pour pallier a la gestion de la touche entrée sur les formulaires --
>
<INPUT TYPE="text" NAME="dummy" value="dummy&q
uot; style="display:none;">
<!-- déclaration du champs dans l
equel on va tapé sa recherche -->
Auto completion : <input type="tex
t"
class="texte"
id="completion_text"
name="completion_text"
onkeyup="recup_email(event)
;"
autocomplete="off">
<BR>
<!-- délacarati
on du SELECT a choix unique pour la completion -->
<select id="compl
etion_select"
name="completion_select"
size="1"
onclick="recup_mail_click();"
style="margin-left:110px;borde
r:solid 1px black;border-top:none;display:none;"></select>
<
BR>
<input type="button" onclick="completion_form.submit()
;" value="Envoyer">
<!-- fin du code HTML -->
</f
orm>
</body>
</html>
Conclusion :
Fonctionne avec IE et Firefox (pas testé su
r les autres navigateurs).
Necessite PHP + Javascript (fonctionne avec Aj
ax)
- On peut choisir de respecter la hauteur de case ou pas
- On peut choisir à partir de combien de caractère on lance la
recherche.
Amusez vous bien.