on Screencast

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-&gt;prepare($sql);
if (strpos($sql, ":housenum")) $statement-&gt;bindParam(':housenum', $query_array[0], PDO::PARAM_INT);
if (strpos($sql, ":queryright")) $statement-&gt;bindParam(':queryright', $queryright, PDO::PARAM_STR);
if (strpos($sql, ":queryboth")) $statement-&gt;bindParam(':queryboth', $queryboth, PDO::PARAM_STR);

// Execute the statement
$statement-&gt;execute();
$result=$statement-&gt;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>


&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;script src="script.js"&gt;&lt;/script&gt;
</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();});
};