@b1tsteller/taggy v0.1.0

taggy | Open Semantic Tagging

• try out the live-demo here

Please Note

This here is to get you going quickly. For more information on taggy, more demos and extended docs, please go here.

Getting Started

Import it via CDN:

<script src="https://cdn.jsdelivr.net/npm/@b1tsteller/taggy"></script>

Or install taggy with npm:

npm install @b1tsteller/taggy

Then import the package and create a new instance with at least an input and an output-element:

import { Taggy } from "@b1tsteller/taggy";

let inputElement = document.getElementById('inputField');
let outputElement = document.getElementById("outputDiv");

let taggy = new Taggy(inputElement, outputElement);

• The input-element is a html-tag, preferably <input> or <textarea>, but can be everything holding text

• The output-element can be a html-tag of any kind, preferably <div>

Get your glossary ready and adjust it to your needs:

The default comes integrated under /data/glossary.json with the data shown below. But you definetly want to use your own :)

You can set it like this:

import myGlossary from "../data/my-glossary.json";

taggy.setGlossary(myGlossary);

The structure is as follows:

{
  "tags": [
    {
      "category": "Herbs and Spices",
      "keywords": ["Rosemary", "Parsley", "Pepper", "Thyme", "Mint", "Chilli", "Basil", "Dill"]
    },
    {
        "category": "Vegetables",
        "keywords": ["Potatoes", "Cucumber", "Garlic", "Carrots", "Spinach", "Onion", "Mushrooms"]
    },
    {
      "category": "Fish",
      "keywords": ["Salmon", "Tuna", "Red Snapper", "Sardines", "Herring", "Flounder", "Bass", "Mackerel"]
    }
  ]
}

Retrieve detected single Tag:

The input-element which was provided on instatiation will receive the parameter "value" with the detected tag in it. For example:

<div id="outputDiv" value="Economy">
  <div class="taggy-tag">Economy</div>
</div>

Retrieve multiple Tags:

You can get multiple detected tags via the override-function, even when it's not visible to your users (e.g. "display: none"). Please make sure to turn it on (see options below). You'll get an element like this:

<div id="override" value="Politics, Science">
  <div class="taggy-tag taggy-override">Politics</div>
  <div class="taggy-tag taggy-override">Science</div>
</div>

Options

You can add additional params when creating the taggy object:

let taggy = new Taggy(inputElement, outputElement, 
{ submitButton: submit, loaderElement: loaderDiv, includeTop: true });

Framework Integration

Angular

This is a basic example on how you can integrate taggy into an Angular-project:

In your HTML-Template:

    <input type="text" #taggyInput />
    <div #taggyOutput></div>

In your .ts-file:

  import { ViewChild, ElementRef } from "@angular/core";
  import { Taggy } from "@b1tsteller/taggy";

  ...
  @ViewChild("taggyInput") taggyInput: ElementRef;
  @ViewChild("taggyOutput") taggyOutput: ElementRef;
  
  ...
   ngAfterViewInit() {
    let taggyObject = new Taggy(this.taggyInput.nativeElement, this.taggyOutput.nativeElement);
  }

Languages

taggy is language agnostic. But it's advised to define it, so common (and for this task irrelevant words) aka stopwords ("by", "a", "the", "also", "and", ...) in the input won't be processed. Below list from here