Input autocomplete sans AJAX ni jQuery !

Commenter

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

S'inscrire maintenant

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.

Du même auteur (JLM Consultant)