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>
<!–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:
<!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>
|
Output:
Reference: http://www.jeasyui.com/documentation/