Input autocomplete sans AJAX ni jQuery !

0/5 (3 avis)

Snippet vu 6 333 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
// 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
mercingoma
Messages postés
83
Date d'inscription
vendredi 21 décembre 2012
Statut
Membre
Dernière intervention
31 juillet 2019

Modifié le 13 août 2017 à 00:13
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/
JLM Consultant
Messages postés
6
Date d'inscription
lundi 12 mars 2012
Statut
Membre
Dernière intervention
10 septembre 2015

10 sept. 2015 à 00:47
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 :)
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
9 sept. 2015 à 14:29
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.

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.