EasyUI jQuery comboBox widget

Last Updated : 29 Oct, 2022

EasyUI is an 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 ComboBox using jQuery EasyUI. ComboBox display an editable text box and drop-down list, from which the user can select one or multiple values.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

<input class="easyui-combobox">

Properties:

  • valueField: The underlying data value name to bind to this ComboBox.
  • textField: The underlying data field name to bind to this ComboBox.
  • groupField: Indicate what field to be grouped.
  • groupFormatter: return group text to display on group item.
  • mode: Defines how to load list data when text changed.
  • url: A URL to load list data from remote.
  • method: The http method to retrieve data.
  • data: The list data to be loaded.
  • queryParams: The additional parameters that will be sent to server when requesting remote data.
  • limitToList: True to limit the inputted values to the listed items.
  • showItemIcon: True to display icon of the selected item on the textbox.
  • groupPosition: The item group position,
  • filter: Defines how to filter the local data when 'mode' is set to 'local'.
  • formatter: Defines how to render the row.
  • loader: Defines how to load data from remote server. Return false can abort this action.
  • loadFilter: Return the filtered data to display.

Event:

  • onBeforeLoad: Fires before a request is made to load data.
  • onLoadSuccess: Fires when remote data is loaded successfully.
  • onLoadError: Fires when an error occurs during loading remote data.
  • onChange: Fires when the field value is changed.
  • onClick: Fires when the user clicks a list item.
  • onSelect: Fires when the user selects a list item.
  • onUnselect: Fires when the user unselects a list item.

Methods:

  • options: Return the options object.
  • getData: Return the loaded data.
  • loadData: Load the locale list data.
  • reload: Request the remote list data.
  • setValues: Set the combobox value array.
  • setValue: Set the combobox value.
  • clear: Clear the combobox value.
  • select: Select the specified item.
  • unselect: Unselect the specified item.

CDN Link: 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="jquery.easyui.mobile.js"> </script>

Example 1:

HTML 
<!doctype html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no"> 
            
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
        href="themes/metro/easyui.css"> 

    <link rel="stylesheet" type="text/css"
        href="themes/mobile.css"> 

    <link rel="stylesheet" type="text/css"
        href="themes/icon.css"> 

    <!--jQuery library -->
    <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="jquery.easyui.mobile.js"> 
    </script> 

    <script type="text/javascript"> 
      $(document).ready(function (){ 
         $('#gfg').combobox({ 
           valueField: 'value',
           textField: 'text'
         }); 
      }); 
    </script> 
</head> 

<body>

    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery combobox widget</h3>
    <select id="gfg" class="easyui-combobox" 
            name="dept" style="width:200px;">
      <option>gfg1</option>
      <option>gfg2</option>
      <option>gfg3</option>
      <option>gfg4</option>
      <option>gfg5</option>
    </select>
</body>
</html>

Output:

 

Reference: http://www.jeasyui.com/documentation/

Comment

Explore