EasyUI jQuery searchbox widget

Last Updated : 12 Mar, 2021

In this article, we will learn how to design a search box widget using the jQuery EasyUI search box widget allows the user to search the data by searching the value. Easy UI 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.

Download EasyUI for jQuery:

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

Syntax:

var a = $(".selector").searchbox ({

});

Properties:

height: The height of the component.
width: The width of the component.
prompt: The prompt message to be displayed in the input box.
value: The value to be input
menu: The search type menu.
searcher: The searcher function will be called when the user presses the searching button or press ENTER key.
disabled: This property is used to disable the component.

Methods:

reset: It resets the value.
clear: It clears the value.
enable: It enables the search box
destroy: It destroys the search box.
disable: It disables the search box.
resize: It resizes the search box
selectName: It selects the current searching type name.
getValue: It returns the current searching type name
setValue: It set the current searching type name
textbox: It returns the text box object.
menu: It returns the search type menu object.
options: It returns the options object.

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

<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> 
</head> 

<body> 
    <h1>GeeksforGeeks</h1>
    <h3>Easy UI | searchbox widget</h3>
    <input id="ss" class="easyui-searchbox" 
           style="width:300px" data-options="menu:'#men'">
    <div id="men" style="width:120px">
       <div>GFG1</div>
       <div>GFG2</div>
    </div>
</body>
</html>