David van der Tuijn | Laravel Developer

14 november, 2010

AutoAanvullen van Nederlandse plaatsen

Bij automatisch aanvulling voorspelt het programma het woord of de zin die de gebruiker wil typen zonder dat deze dit al volledig heeft ingetikt.

Bron : AutoAanvullen - Wikipedia

Met deze toepassing wordt een database met Nederlandse plaatsnamen geraadpleegd en retourneert bij elke toetsaanslag de voorspelling.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link type="text/css" href="city.css" rel="stylesheet" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"><script>
	<script type="text/javascript">
	$(document).ready(function(){
		$(":input.city").keyup(function(){
			if ($(":input.city").val().length == 0) {
				$("div.ajax_city_data").fadeOut("fast");
			} else {
				$("div.ajax_city_loader").show();
				$.get('ajax_city.php', { city : $(":input.city").val() }, function(xml) {
					if (xml.getElementsByTagName("city").length >= 1) {
						$("div.ajax_city_data").fadeIn("fast");
						var list = '';
						list += '<ul>';
						$(xml).find('city').each(function(){
							var description = $(this).find("description").text();
							list += '<li>' + description + '</li>';
						});
						list += '</ul>';
						$("div.ajax_city_data").html(list);
						$("li:even").addClass('even');
						$("li:odd").addClass('odd');
					} else {
						$("div.ajax_city_data").fadeOut("fast");
					}
					$("div.ajax_city_loader").hide();
				});
			}
		});
		$("div.ajax_city_data ul li").live('click', function() {
			$("div.ajax_city_data").hide();
			$(":input.city").val($(this).text());
			$(":input.city").focus();
		});
		$(':input.city').blur(function() {
			$("div.ajax_city_data").fadeOut("fast");
		});
	});
	</script>
	</head>
	<div id="container">
		<input type="text" name="city" id="city" class="city" size="50" />
		<div class="ajax_city_loader"></div>
		<div class="ajax_city_data"></div>
	</div>
</html>

div#container
{
	width: 500px;
	margin-left: auto;
	margin-right: auto;
}

div.ajax_city_loader
{
	display: none;
	position: relative;
	top: -20px;
	left: -25px;
	background-image: url('ajax_loader.gif');
	width: 16px;
	height: 16px;
}

div.ajax_city_data
{
	display: none;
	position: absolute;
}

div.ajax_city_data ul
{
	width: 200px;
	margin: 0px;
	padding: 0px;
	border: 1px solid #000000;
	list-style: none;
}

div.ajax_city_data ul li
{
	padding: 3px 5px 3px 5px;
	font-family: "Lucida Grande", "Lucida Sans Unicode";
	font-size: 14px;
	color: #000000;
	cursor: pointer;
}

div.ajax_city_data ul li:hover
{
	background-color: #0a246a !important;
	color: #FFFFFF;
}

div.ajax_city_data ul li.even
{
	background-color: #EEEEEE;
}

div.ajax_city_data ul li.odd
{
	background-color: #FFFFFF;
}

header("Content-type: text/xml");

mysql_connect("localhost", "root", "root") or die(mysql_error());
mysql_select_db("davidvandertuijn") or die(mysql_error());
mysql_query("SET NAMES 'utf8'");

$sql = sprintf("SELECT * FROM cities WHERE description LIKE '%s' LIMIT 15", mysql_real_escape_string($_GET['city']) . "%");

$result = mysql_query($sql) or die(mysql_error());

if ( mysql_num_rows($result) != 0 )
{
	$dom = new DOMDocument('1.0','utf-8');

	$cities = $dom->createElement('cities');

	$dom->appendChild($cities);

	while ($row = mysql_fetch_object($result))
	{
		$city = $dom->createElement('city');
		$cities->appendChild($city);
		$description = $dom->createElement('description');
		$description->appendChild($dom->createCDATASection($row->description));
		$city->appendChild($description);
	}

	echo $dom->saveXML();
}

AutoAanvullen