Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

EasyUI jQuery tagbox Widget

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

In this article, we will learn how to design a tagbox using jQuery EasyUI. Tagbox allows the user to display tag labels instead of displaying values on the inputting box.

Downloads EasyUI for jQuery:


<input class="easyui-tagbox">



  • hasDownArrow: It returns boolean value true to show a down arrow button otherwise return false.
  • tagFormatter: The function to return the formatted value.
  • tagStyler: The tag styler function.


  • onClickTag: Fires when the tag is clicked.
  • onBeforeRemoveTag: Fires before removing a tag.
  • onRemoveTag: Fires when you remove a tag.

Approach: First, add jQuery Easy UI scripts needed for your project.

<script type=”text/javascript” src=”jquery.min.js”>  </script>

<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”></script>

<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=””> </script>



<!doctype html>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "initial-scale=1.0, maximum-scale=1.0, 
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
    <link rel="stylesheet" type="text/css" 
    <link rel="stylesheet" type="text/css" 
    <!-- jQuery library -->
    <script type="text/javascript" 
    <!-- jQuery libraries of EasyUI -->
    <script type="text/javascript" 
    <!-- jQuery library of EasyUI Mobile -->
    <script type="text/javascript" 
    <script type="text/javascript">
        $(document).ready(function() {
                hasDownArrow: true
    <h3>EasyUI jQuery tagbox widget</h3>
    <input id="gfg" class="easyui-tagbox" 
        label="Add a tag">




My Personal Notes arrow_drop_up
Last Updated : 07 Apr, 2021
Like Article
Save Article
Similar Reads
Related Tutorials