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.


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');

    $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();
}

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