EasyUI 搜索框

最新推荐文章于 2021-06-04 12:10:02 发布

转载最新推荐文章于 2021-06-04 12:10:02 发布 · 168 阅读

·

0

·

文章标签：

#javascript #ViewUI

1、用法

（1）、从标记创建。把 'easyui-searchbox' class 加入到 <input> 标记。

[html] view plain copy

<script type="text/javascript">
function qq(value,name){
alert(value+":"+name)
}
</script>
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>

（2）、编程创建。

[html] view plain copy

<input id="ss"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
$('#ss').searchbox({
searcher:function(value,name){
alert(value + "," + name)
},
menu:'#mm',
prompt:'Please Input Value'
});

2、属性

名称	类型	描述	默认值
width	number	组件的宽度。	auto
height	number	组件的高度。该属性自版本 1.3.2 起可用。	22
prompt	string	显示在输入框里的提示信息。	''
value	string	输入的值。	''
menu	selector	搜索类型的菜单。每个菜单项可以有下列的属性： name：搜索类型名称。 selected：当前选择的搜索类型名称。	null
searcher	function(value,name)	当用户按下搜索按钮或者按下 ENTER 键时，searcher 函数将被调用。	null

3、方法

名称	参数	描述
options	none	返回选项（options）对象。
menu	none	返回搜索类型的菜单对象。
textbox	none	返回文本框对象。
getValue	none	返回当前的搜索值。
setValue	value	设置新的搜索值。
getName	none	返回当前的搜索类型名称。
selectName	name	选择当前的搜索类型名称。
destroy	none	销毁该组件。
resize	width	重设组件的宽度。

4、实例

（1）、基本搜索框

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic SearchBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic SearchBox</h2>
<p>Click search button or press enter key in input box to do searching.</p>
<div style="margin:20px 0;"></div>
<input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:300px"></input>
<script>
function doSearch(value){
alert('You input: ' + value);
}
</script>
</body>
</html>

（2）、搜索框类别

[html] view plain copy

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Search Category - jQuery EasyUI Demo</title>
6. <link rel="stylesheet" type="text/css" href="../css/easyui.css">
7. <link rel="stylesheet" type="text/css" href="../css/icon.css">
8. <link rel="stylesheet" type="text/css" href="../css/demo.css">
9. <script type="text/javascript" src="../js/jquery.min.js"></script>
10. <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
11. </head>
12. <body>
13. <h2>Search Category</h2>
14. <p>Select a category and click search button or press enter key in input box to do searching.</p>
15. <div style="margin:20px 0;"></div>
16. <input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" style="width:300px"></input>
17. <div id="mm">
18. <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
19. <div data-options="name:'sports'">Sports News</div>
20. </div>
21. <script>
22. function doSearch(value,name){
23. alert('You input: ' + value+'('+name+')');
24. }
25. </script>
26. </body>
27. </html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。