Screencast #15: Ubersearch - Fuzzy Tolerance

Resources

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

Resources

autocomplete.php

index.html

script.js

Comments