Scripts

Woonplaats aanvuller

Door Eris - -29-06-2006 00:00 -7.420 views

Naar aanleiding van Deze topic heb ik ik het volgende systeem gemaakt. Werking 3 bestande 1. city.js Javascript bestand 2. citylist.php 3. Het formulier met de plaats. Let op: Formulier is op gemaakt met position absorlute en dient worden aan gepast aan jouw layout / opzet anders gaat het niet werken... Daarnaast de config gegevens van de database aanpassen in citylist.php Script is niet echt database friendly... Sql database posten lukt niet dus zal hem even online zetten http://phphulp.phpclub.nl/684.sql Mirror: www.phphulp.nl/voorbeeld/city.sql Even een aanpassing zodat je sneller kan typen zonder een erge fout melding :) Update om ook hoofdletter te kunnen gebruiken zonder problemen :)

Download alle bestanden als ZIP

woonplaats-aanvuller

citylist.php
[code]
<?php
//maak verbinding
mysql_select_db('tabel',mysql_connect('localhost','user','pw'));
//query 
if(!empty($_GET['city'])){
  $sql = 'SELECT city FROM city WHERE city LIKE LOWER("'.mysql_real_escape_string($_GET['city']).'%") GROUP BY city'; 
//voer query uit
$out = mysql_query($sql) or trigger_error(mysql_error());
//maak een var aan waar het in komt we willen geen error namelijk
//loop door alle resultaten
$i = 1;
while($city = mysql_fetch_assoc($out)){
  if($i > 1){ echo '/';}
  echo $city['city'];
  $i++;
}
}
?>
[/code]

city.js 

Gebruik je <? en ?> voor highligting DUS NIET GEBRUIKEN!

[code]
<?
//stukje code om AJAX te activeren...
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
	try {
		xmlhttp = new XMLHttpRequest();
	} catch (e) {
		xmlhttp=false;
	}
}
if (!xmlhttp && window.createRequest) {
	try {
		xmlhttp = window.createRequest();
	} catch (e) {
		xmlhttp=false;
	}
}
//einde
//we maken nu een eigen JS functie aan om de afhandeling te doen.

function get_city(){
//kill vorige actie
  xmlhttp.abort();
  //we hebben werken veel met 2 velden dus daar halen we even een paar gegevens uit op
  var x = document.getElementById('city').value;
document.getElementById('list').style.display = 'block';
  //maak nu een ajax request aan
  xmlhttp.open('GET','citylist.php?city=' + x ,true);
   xmlhttp.onreadystatechange=function() {
     //hee kijken of we een reactie hebben
  if (xmlhttp.readyState==4) {	
    //split op de scheiding teken
	var city = xmlhttp.responseText.split('/');
	//wis alle huidige opties
	while(document.getElementById('list').options[1] != null){
	  document.getElementById('list').options[1] = null;
	}
	//voeg alle opties toe... 
	for(i in city){
    document.getElementById('list').options[i] = new Option(city[i],city[i]);
	  }
	}
  }
 xmlhttp.send(null)
  }
  function change_value(){
    //vraag waarde op
   var a = document.getElementById('list').options[document.getElementById('list').selectedIndex].value;
	document.getElementById('city').value = a;
	     document.getElementById('list').style.display = 'none';
   }
   function hideselect(){
	var t=setTimeout("document.getElementById('list').style.display = 'none';",1000)
     }
?>[/code]

plaats.php om te testen maar dit moet je natuurlijk toepassen is je eigen formulier....

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='nl'>
<head>
<title>Test formulier AJAX</title>
<script type='text/javascript'  src='./city.js'></script>
</head>
<?php
//het formulier eigelijk doe ik nu maar 1 verld
?>
<style type="text/css">
body{
  z-index:0;
}
#list
{

position:absolute;
left:10px;
top:50px;
z-index:1;
display:none;
}
</style>
<select name="list" id="list" multiple="multiple" size="7" style="width:200px;" onclick="change_value()"></select>

Plaats naam:<br />
<input type="text" name="city" id="city" onkeyup="get_city()" onchange="hideselect()"><br />
<input type="submit" value="Verzenden" />
[/code]

Sql database posten lukt niet dus zal hem even online zetten
http://www.phpclub.nl/city.sql