DEV Community

Rafael Cachoeira
Rafael Cachoeira

Posted on

4 1

jquery-text-wildcard-area: A jQuery plugin to add and remove wildcards

A jQuery plugin for textarea to add and remove wildcards from text

Basic Usage

Declare a textarea and declare a list of tags to use with UL LI

 <textarea id="MyTextWildCardArea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>

Enter fullscreen mode Exit fullscreen mode
$('#MyTextWildCardArea').textWildCardArea();
Enter fullscreen mode Exit fullscreen mode

It is also possible to instantiate with many text areas.

 <textarea id="TextAreaExample" class="my-textarea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>


<textarea id="AnotherTextArea" class="my-textarea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>

Enter fullscreen mode Exit fullscreen mode
$('.my-textarea').textWildCardArea();
Enter fullscreen mode Exit fullscreen mode

data attributes

  • data-toggle="tag": Required: define the type tag for a element
  • data-target="#elementId": Required: define the target textarea to observer

classes

  • tag tag-available: the plugin uses this class to control a toggle state.
  • tag tag-unavailable: the plugin uses this class to control a toggle state. At least one class is required

The plugin doesn't have css styles, but this css can be useful for a basic style

     .tag.tag--available {
        cursor: pointer;
        font-weight: 700;
    }

    .tag.tag--unavailable {
        cursor: pointer;
        font-weight: normal;
        font-style: italic;
        text-decoration: line-through;
    }
Enter fullscreen mode Exit fullscreen mode

Usability

  • Click once for add wildcard to the textarea
  • Click once for remove all wildcards from the textarea
  • If a textarea already has data coming from the server, the plugin must observe and apply the toggle state on the tags

Image of Example

Code: https://github.com/raafacachoeira/jquery-text-wildcard-area

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay