EasyUI jQuery datalist widget

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 datalist using jQuery EasyUI. A datalist renders items in a list. It is a special datagrid that displays data in one column.

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-datalist">

Properties:

lines: This property defines to display the row lines.
checkbox: This defines if to display a checkbox for each row.
valueField: The field value name to bind to the row.
textField: The field name to display on the row.
groupField: Indicate what field to be grouped.
textFormatter: The text field formatter function.
groupFormatter: The formatter function to return the group content,

CDN Link: First, add jQuery Easy UI scripts needed for your project, links are local paths.

<script type="text/javascript" src="jquery.min.js"> </script>  <script type="text/javascript" src="jquery.easyui.min.js"> </script>  <script type="text/javascript" src="jquery.easyui.mobile.js"> </script>

Example:

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">
      $('#gfg').datalist();
    </script>
</head> 

<body>
    <h1>GeeksforGeeks</h1>
    <h3>how to make a basic datalist using jQuery UI?</h3>
    <ul id="gfg"class="easyui-datalist" title="DataList">
      <li value="1">Geeks</li>
      <li value="2">Geeks2</li>
      <li value="3">Geeks3</li>
      <li value="4">Geeks4</li>
      <li value="5">Geeks5</li>
      <li value="6">Geeks6</li>
    </ul>
</body>
</html>

Output:

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

EasyUI jQuery datalist widget

Explore