Screencast



Resources


SQLite Database

autocomplete.php


<?php

// capture arguments
$requestTypes = explode(“,”, $_GET[“searchtypes”]);
$query = trim($_REQUEST[‘query’]);

// You could set a minimum query string length here

// Set a couple of vars
$query_array = explode(‘ ‘, $query);
$sql = “”;

// Address
if (is_numeric($query_array[0]) and in_array(“Address”, $requestTypes)) {
$sql .= “select gid, fulladdress as ‘name’, ‘Address’ as type from address where housenum = :housenum and trim(fulladdress) like :queryright”;
}

// Parks
if (in_array(“Parks”, $requestTypes)) {
if (strlen($sql) > 0) $sql .= “ union “;
$sql .= “select gid, prkname as name, ‘Parks’ as type from parks where prkname like :queryboth”;
}

// Libraries
if (in_array(“Libraries”, $requestTypes)) {
if (strlen($sql) > 0) $sql .= “ union “;
$sql .= “select gid, library as name, ‘Libraries’ as type from libraries where library like :queryboth”;
}

// Order the return
// You could also limit the return size here using the limit keyword
$sql .= “ order by type, name”;

try {
// open the database
$db = new PDO(‘sqlite:./acdb.db’);

// PDO doesn’t like concatenating strings inside bindParam, so we’ll do that here for like searches
$queryright = $query . “%”;
$queryboth = “%” . $query . “%”;

// Prepare the SQL statement
$statement=$db->prepare($sql);
if (strpos($sql, “:housenum”)) $statement->bindParam(‘:housenum’, $query_array[0], PDO::PARAM_INT);
if (strpos($sql, “:queryright”)) $statement->bindParam(‘:queryright’, $queryright, PDO::PARAM_STR);
if (strpos($sql, “:queryboth”)) $statement->bindParam(‘:queryboth’, $queryboth, PDO::PARAM_STR);

// Execute the statement
$statement->execute();
$result=$statement->fetchAll(PDO::FETCH_ASSOC);

// Return json
// You could return jsonp via something like if (isset($_REQUEST[‘callback’])) $json = $_REQUEST[‘callback’] . ‘(‘ . $json . ‘)’;
$json= json_encode($result);
echo $json;


// close the database connection
$db = NULL;
}
catch(PDOException $e) {
print ‘Exception : ‘.$e->getMessage();
}

?>


index.html


<!doctype html>
<html lang=”en”>
<head>
<title>Ubersearch Example</title>
<link type=”text/css” media=”all” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/blitzer/jquery-ui.css“ rel=”stylesheet” />

<style>
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#container { margin: 100px auto; width: 500px; text-align: center; }
#searchinput {
font-size: 1.3em;
margin: 0;
padding: 6px 5px;
width: 100%;
}
.ui-autocomplete .ui-menu-item { padding-left: 10px }
.ui-autocomplete-category { font-weight: bold; }
.ui-autocomplete {
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
font-size: 0.9em;
max-height: 400px;
}
.ui-autocomplete-category {
font-weight: bold;
padding: 0 4px;
line-height: 1.5;
font-variant: small-caps;
font-size: 1.1em;
}
</style>

</head>
<body>
<div id=”container”>
<input id=”searchinput” class=”ui-corner-all” x-webkit-speech speech placeholder=”Start here!” />
</div>


<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script&gt;
<script src=”script.js”></script>
</body>
</html>


script.js

$(document).ready(function(){

    // Select text box content on click
    $("#searchinput").click(function() { $(this).select(); });

    // jQuery UI Autocomplete
    $("#searchinput").autocomplete({
        minLength: 4,
        delay: 400,
        autoFocus: true,
        source: function(request, response) {
            $.ajax({
                url: "autocomplete.php",
                dataType: "json",
                data: {
                    searchtypes: "Address,Libraries,Parks",
                    query: request.term
                },
                success: function(data) {
                    if (data.length > 0) {
                        response($.map(data, function(item) {
                            return {
                                label: item.name.toProperCase(),
                                gid: item.gid,
                                responsetype: item.type
                            };
                        }));
                    } else { // No records found message
                        response($.map([{}], function(item) {
                            return {
                                responsetype: "I've got nothing",
                                label: "Well...darn."
                            };
                        }));
                    }
                }
            });
        },
        select: function(event, ui) {
            if (ui.item.gid) {
                locationFinder(ui.item.responsetype, ui.item.gid);
            }
        }
    }).data("autocomplete")._renderMenu = function(ul, items) {
        var self = this,
            currentCategory = "";
        $.each(items, function(index, item) {
            if (item.responsetype != currentCategory && item.responsetype !== undefined) {
                ul.append("<li class='ui-autocomplete-category'>" + item.responsetype + "</li>");
                currentCategory = item.responsetype;
            }
            self._renderItem(ul, item);
        });
    };

});


function locationFinder( type , gid ) {
    console.log("I'm off to map " + type + " with an id of " + gid + "!");
}

String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};