欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » JQuery EasyUI 1.3.6官方API文档中文版 » 正文

SearchBox(搜索框)

创建时间:2014年08月23日 11:07  阅读次数:(5631)
分享到:

SearchBox(搜索框)

使用$.fn.searchbox.defaults重写默认值对象。

搜索框提示用户需要输入搜索的值。可以结合一个菜单,允许用户选择不同的搜索类别。在用户按下回车键或点击组件右边的搜索按钮的时候会执行搜索操作。

 

使用案例

创建查询框

1. 使用标签创建。添加'easyui-searchbox'类ID到<input/>标签。

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

2. 创建程序。

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

 

属性

属性名 属性值类型 描述 默认值
width number 组件宽度。 auto
height number 组件高度。(该属性自1.3.2版开始可用) 22
prompt string 在输入框中显示提示消息。 ''
value string 输入的值。 ''
menu selector 搜索类型菜单。每个菜单项都具备一下属性:
name:搜索类型名称。
selected:自定义默认选中的搜索类型名称。

如下示例定义了一个选择搜索类型名称的搜索框:

<input class="easyui-searchbox" style="width:300px" data-options="menu:'#mm'" />
<div id="mm" style="width:150px">
	<div data-options="name:'item1'">Search Item1</div>
	<div data-options="name:'item2',selected:true">Search Item2</div>
	<div data-options="name:'item3'">Search Item3</div>
</div>
null
searcher function(value,name) 在用户按下搜索按钮或回车键的时候调用searcher函数。 null
disabled boolean 定义是否禁用搜索框。(该属性自1.3.6版开始可用) false

 

方法

Name Parameter Description
options none 返回属性对象。
menu none 返回搜索类型菜单对象。下面的例子显示了更改菜单项图标。
var m = $('#ss').searchbox('menu');                    // 获取菜单项
var item = m.menu('findItem', 'Sports News');     // 查找菜单项 // 更改菜单项图标 m.menu('setIcon', {     target: item.target,     iconCls: 'icon-save' }); // 选择搜索类型名 $('#ss').searchbox('selectName', 'sports');
textbox none 返回文本框对象。
getValue none 返回当前搜索值。
setValue value 设置一个新的搜索值。
getName none 返回当前搜索类型名。
selectName name 选择当前搜索类型名。

代码示例:

$('#ss').searchbox('selectName', 'sports');
destroy none 销毁该控件。
resize width 重置组件宽度。
disable none 禁用搜索框。(该方法自1.3.6版开始可用)
enable none 启用搜索框。(该方法自1.3.6版开始可用)
clear none 清除搜索框。(该方法自1.3.6版开始可用)
reset none 重置搜索框。(该方法自1.3.6版开始可用)

来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 65+24=? 的结果(结果是:89)
结  果: