Input autocomplete sans AJAX ni jQuery !
0/5 (3 avis)
Snippet vu 6 870 fois - Téléchargée 13 fois
Contenu du snippet
Tout est dans le titre !
Une balise input autocomplete sans AJAX ni jQuery !
La base de données utilisée est la liste des communes de France avec plus de 365000 entrées dans un fichier texte externe ... Ceci afin de constater la rapidité du script !
Voir la démonstration : http://jlmconsultant.fr/test/autocompletion.php
Une balise input autocomplete sans AJAX ni jQuery !
La base de données utilisée est la liste des communes de France avec plus de 365000 entrées dans un fichier texte externe ... Ceci afin de constater la rapidité du script !
Voir la démonstration : http://jlmconsultant.fr/test/autocompletion.php
// CODE PHP
ini_set('url_rewriter.tags', '') ;
session_start() ;
// DEFINITION COMMUNES
if ( isset($_SESSION['villes']) )
$villes = $_SESSION['villes'] ;
else
{
$communes_liste = array() ;
$communes_liste = file("xx/communes.lst") ;
$communes = array() ;
for ( $x=0 ; $x<count($communes_liste) ; $x++ )
{
$communes[] = explode("*",trim($communes_liste[$x])) ;
}
$villes = array() ;
for ( $x=0 ; $x<count($communes) ; $x++ )
{
$villes[] = $communes[$x][2] ;
}
$_SESSION['villes'] = $villes ;
}
// CODE HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="../style-base.css" >
<link rel="stylesheet" type="text/css" href="../style-ecran.css" >
<style>
.select { color:#666666;background-color:#FFFFFF;padding:2px;cursor:pointer }
.select:hover { color:#FFFFFF;background-color:#666666;cursor:pointer }
#liste { z-index:3;position:relative;visibility:hidden;color:#808080;background-color:#FFFFFF;border:1px solid #C0C0C0;border-radius:5px;padding:5px;margin:10px;display:none;float:right;width:260px;max-height:200px;overflow-y:auto;overflow-x:hidden;-moz-overflow-y:auto;-moz-overflow-x:hidden;-ms-overflow-y:auto;-ms-overflow-x:hidden;-o-overflow-y:auto;-o-overflow-x:hidden;-webkit-overflow-y:auto;-webkit-overflow-x:hidden }
</style>
<title>JLM Consultant</title>
</head>
<body>
<div align="center" >
<br><br>
<h2>Input Autocomplete - Sans AJAX ni jQuery !</h2>
<p>Base de données utilisée = la liste des communes de France avec plus de 36500 entrées dans un fichier texte externe !<br>Ceci afin de constater la rapidité du script !</p>
<br>
<form name="communes" >
<input type="text" name="ville" size="24" value="" class="champ" style="text-transform:uppercase" onkeyup="select_villes();" >
<input type="submit" value="OK" class="bouton" >
</form>
<div id="liste" align="left" ></div>
</div>
</body>
// CODE JAVASCRIPT
// DEFINITION TAB VILLES
var villes ;
if ( typeof(villes) == 'undefined' )
{
var villes = new Array();
var villes = [
<?php
for ( $i=0 ; $i<count($villes) ; $i++ )
{
echo """.$villes[$i].""" ;
if( $i != count($villes)-1 )
echo "," ;
}
?>
] ;
}
// DEFINITION TAB VILLES SELECT
function select_villes()
{
visible = false ;
villes_select = new Array() ;
nb_carac = communes.ville.value.length ;
if ( nb_carac > 2 ) // Nombre de caractère minimum pour sélectionner les villes correspondantes !
{
debut = communes.ville.value ;
debut = debut.toUpperCase() ;
for ( i=0 ; i<villes.length ; i++ )
{
if ( villes[i].substring(0,nb_carac) == debut )
{
villes_select.push(villes[i]) ;
}
}
if ( villes_select.length > 0 )
{
id = 'liste' ;
contenu = "" ;
for ( i=0 ; i<villes_select.length ; i++ )
{
contenu += "<div class='select' onclick='ville("" + villes_select[i] + "");' >" + villes_select[i] + "</div>" ;
}
if ( visible == false )
{
if ( document.getElementById )
{
document.getElementById(id).innerHTML = contenu ;
document.getElementById(id).style.display = "block" ;
document.getElementById(id).style.float = "none" ;
document.getElementById(id).style.visibility = "visible" ;
}
else
{
document.all[id].innerHTML = contenu ;
document.all[id].style.display = "block" ;
document.all[id].style.float = "none" ;
document.all[id].style.visibility = "visible" ;
}
visible = true ;
}
}
else
{
masquer_liste() ;
alert("Aucun élément ne correspond à vos critères !") ;
}
}
}
// SELECT VILLE
function ville(v)
{
masquer_liste() ;
communes.ville.value = v ;
}
// MASQUER LISTE
function masquer_liste()
{
if ( document.getElementById )
{
document.getElementById(id).style.display = "none" ;
document.getElementById(id).style.float = "left" ;
document.getElementById(id).style.visibility = "hidden" ;
}
else
{
document.all[id].style.display = "none" ;
document.all[id].style.float = "left" ;
document.all[id].style.visibility = "hidden" ;
}
visible = false ;
}
A voir également
- Input autocomplete sans AJAX ni jQuery !
- Ajax synchrone - Conseils pratiques -Javascript
- Requête ajax jquery ✓ - Forum Javascript / DHTML
- Input onclick ✓ - Forum Javascript / DHTML
- Ajax control toolkit - Forum ASP.NET
- Aspnet ajax - Forum ASP.NET
Modifié le 13 août 2017 à 00:13
dans ce lien vous trouverez les informations : http://informagenie.com/systeme-dauto-completion-html5-javascript/
10 sept. 2015 à 00:47
Tu as raison ! Je t'avoue que mes nouveaux codes sont souvent construits avec des bouts de codes plus anciens et que je ne prend pas la peine de mettre à jour :(
Mais j'imagine que de nombreux développeur amateur comme moi font la même chose :)
9 sept. 2015 à 14:29
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.