JSFiddle - React, Tailwind, and code Playground

by marcfawzi

HTML

<body>


<h2>Entry Form</h2>
<form id="newentry">
    name: <input type="text" id="name" required><br/>
    tags: <input type="text" id="tags"><br/>
    <input type="submit" value="Store">
</form>

<p>
  <input type="text" id="tags2"> <input type="button" id="getbytag" value="Get By Tag"><br/>
</p>

<div id="searchDiv">
        <h1>Search Results</h1>
<div id="searchresults"></div>
</div>

CSS

#searchDiv {
    width:300px;
    float:right;
    border: solid black;
    padding: 5px;
}

JavaScript

!function(window, $, undefined) {
        "use strict"

        var     openRequest = indexedDB.open("AllMyItems",1)
                ,   db;

        openRequest.onupgradeneeded = function(e) {
            console.log("running onupgradeneeded");

            var thisDb = e.target.result;

            //Create objectStore
            if(!thisDb.objectStoreNames.contains("people")) {
                var objectStore = thisDb.createObjectStore("people", { keyPath: "id", autoIncrement:true });
                objectStore.createIndex("name","name", {unique:false});
                objectStore.createIndex("tags","tags", {unique:false,multiEntry:true});
            }
        }

        openRequest.onsuccess = function(e) {

            db = e.target.result;

            db.onerror = function(event) {
                // Generic error handler for all errors targeted at this database's
                // requests!
                console.log("Database error: " + event.target.errorCode);
                console.dir(event.target);
            };

            //Now we can listen for data adds and lists
            $("#newentry").on("submit", addData);
            $("#getbytag").on("click", getByTag);
        }

        function addData() {
            var transaction = db.transaction(["people"], "readwrite");
            var objectStore = transaction.objectStore("people");
            var name =  $('#name').val()
            var tags =  $('#tags').val().match(/\w+/g).sort()

            var req = objectStore.add({name:name, tags:tags});
            req.onsuccess = function() {
                console.log("data added");
            };
        }

        function showAll(e) {
            e.preventDefault();
            var transaction = db.transaction(["people"], "readonly");
            var objectStore = transaction.objectStore("people");
            var request = objectStore.openCursor();
            var s = "";

            request.onsuccess = function(event) {
              ...