Input autocomplete sans AJAX ni jQuery !

Soyez le premier à donner votre avis sur cette source.

Snippet vu 4 406 fois - Téléchargée 10 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
// 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

Ajouter un commentaire

Commentaires

@karamel
Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 2019
47 -
sympa comme code j'aurais juste une remarque au sujet du teste pour savoir si document.getElementById est supporté qui est inutile car cette méthode est supporté par tous les navigateur y compris ie 6 sa allègerais encore plus le script.
JLM Consultant
Messages postés
6
Date d'inscription
lundi 12 mars 2012
Statut
Membre
Dernière intervention
10 septembre 2015
> @karamel
Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 2019
-
Salut Kazma,
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 :)
mercingoma
Messages postés
87
Date d'inscription
vendredi 21 décembre 2012
Statut
Membre
Dernière intervention
31 juillet 2019
-
Il y a une manière plus simple de faire les choses juste avec HTML5
dans ce lien vous trouverez les informations : http://informagenie.com/systeme-dauto-completion-html5-javascript/

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.