EasyUI jQuery搜索框部件
在这篇文章中,我们将学习如何使用jQuery EasyUI搜索框小部件设计一个搜索框小部件,让用户通过搜索值来搜索数据。Easy UI是一个HTML5框架,用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能,为开发者节省大量时间。
下载EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
语法:
var a = $(".selector").searchbox ({
});
属性:
- height : 组件的高度。
- width : 组件的宽度。
- prompt :要在输入框中显示的提示信息。
- value:要输入的值
- menu:搜索类型菜单。
- searchbox:当用户按下搜索按钮或按下ENTER键时,将调用搜索器功能。
- disabled : 此属性用于禁用该组件。
方法:
- reset : 它重置了数值。
- clear : 它清除了该值。
- enable : 启用搜索框
- destroy : 它破坏了搜索框。
- disable : 它禁用了搜索框。
- resize : 它可以调整搜索框的大小
- selectName。它选择当前的搜索类型名称。
- getValue。它返回当前的搜索类型名称
- setValue。它设置当前的搜索类型名称
- textbox。它返回文本框对象。
- menu。它返回搜索类型的菜单对象。
- options :它返回选项对象。
CDN链接:首先,添加你的项目需要的jQuery Easy UI脚本。
<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>
示例:
<!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>
输出: