Blog

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.


city.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 += '
    '; $(xml).find('city').each(function(){ var description = $(this).find("description").text(); list += '
  • ' + description + '
  • '; }); list += '
'; $("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>

city.css
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; }


ajax_city.php
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');

}


Resultaat

AutoAanvullen


Download ajax_loader.gif : ajax_loader.gif

Meer informatie : AutoAanvullen - Wikipedia

Zie ook : Database van Nederlandse plaatsen

Zie ook : Plugins/Autocomplete - jQuery JavaScript Library

Zoeken