TaffyDB Test

This is a test of using TaffyDB, An opensouce library that brings database features into your JavaScript applications. http://taffydb.com/

by the_voder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>TaffyDB Test</title>
    </head>

    <body>
        <h1>Simulated Database Query</h1>
        <p>A JavaScript database library, <a href="http://taffydb.com/" target="_blank">TaffyDB</a> is used to store a number of records, and return the results of a query run against those records.</p>
            <p>All selected tags must be matched in the "tags" array of a record for the record to be returned.</p>

        <!-- Tags selection form -->
        <form id="selections">
            <p><input type="checkbox" name="tag1" value="Salt & Vinegar"> Salt &amp; Vinegar</p>
            <p><input type="checkbox" name="tag2" value="Cheese & Onion"> Cheese &amp; Onion</p>
            <p><input type="checkbox" name="tag3" value="Wotsits"> Wotsits</p>
            <p><input type="submit" value="Submit" id="button"></p>
        </form>

        <!-- Results element -->
        <section id="results"></section>
    </body>

</html>

CSS

#results {}

JavaScript

$(document).ready(function() {

    // Create TaffyDB instance "db"
    var db = TAFFY();

    // Insert data into db
    db.insert([{
            name: "Walkers",
            thumburl: "walkers_thumb.png",
            link: "walkers.html",
            tags: ["Salt & Vinegar", "Ready Salted", "Cheese & Onion"]
        },
        {
            name: "Kettle Chips",
            thumburl: "kettle_thumb.png",
            link: "kettle.html",
            tags: ["Salt & Vinegar", "Lightly Salted", "Mature Cheddar & Red Onion"]
        },
        {
            name: "Smiths",
            thumburl: "smiths_thumb.png",
            link: "smiths.html",
            tags: ["Wotsits", "Squares", "Snaps"]
        }
    ]);

    // Bind to click on Submit button
    $("#button").on("click", function() {

        // Clear contents of results area
        $("#results").empty();

        // Create array of checkbox values
        // https://stackoverflow.com/questions/16170828/jquery-get-values-of-checked-checkboxes-into-array
        var selectedTags = $("#selections input:checkbox:checked").map(function() {
            return $(this).val();
        }).get();

        // Check selections made
        if (selectedTags.length == 0) {
            // No selection made
            console.log("No tags selected.");
        } else {
            // Selection(s) made, continue
            console.log("Selected tag(s): " + selectedTags);

            // Query db with array of selected tags (matching all selected)
            // then loop through returned records
            db({
                    tags: {
                        hasAll: selectedTags
                    }
                })
                .each(function(r) {
                    // Append to results element using jQuery
                    $("#results").append('<div><h3>' + r.name + '</h3></div>');
                });
        };

        // Suppress default browser action (submit form)
        return false;
    });
});