SearchBox（搜索框）

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

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

依赖关系

• textbox
• menubutton

用法

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

<script type="text/javascript">
  function qq(value, name) {
    alert(value + ":" + name)
  }
</script>
<input id="ss" data-toggle="topjui-searchbox" style="width:300px" data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'">
<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. 创建程序。

<input id="ss">
<div id="mm1" style="width:120px">
  <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
  <div data-options="name:'sports'">Sports News</div>
</div>

$('#ss').iSearchbox({
  searcher:function(value,name){
    alert(value + "," + name)
  },
  menu:'#mm',
  prompt:'请输入值'
});

属性

属性名	属性值类型	描述	默认值
width	number	组件宽度。	auto
height	number	组件高度。	22
prompt	string	在输入框中显示提示消息。	''
value	string	输入的值。	''
menu	selector	搜索类型菜单。每个菜单项都具备一下属性：name：搜索类型名称。selected：自定义默认选中的搜索类型名称。如下示例定义了一个选择搜索类型名称的搜索框：	null
searcher	function(value,name)	在用户按下搜索按钮或回车键的时候调用searcher函数。	null
disabled	boolean	定义是否禁用搜索框。	false

菜单示例

<input data-toggle="topjui-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>

方法

方法名	方法参数	描述
options	none	返回属性对象。
menu	none	返回搜索类型菜单对象。见下方代码示例。
textbox	none	返回文本框对象。
getValue	none	返回当前搜索值。
setValue	value	设置一个新的搜索值。
getName	none	返回当前搜索类型名。
selectName	name	选择当前搜索类型名。见下方代码示例。
destroy	none	销毁该控件。
resize	width	重置组件宽度。
disable	none	禁用搜索框。
enable	none	启用搜索框。
clear	none	清除搜索框。
reset	none	重置搜索框。

方法代码示例

menu方法示例：

下面的例子显示了更改菜单项图标：

var m = $('#ss').iSearchbox('menu');
// 查找菜单项
m.iMenu('setIcon', { target: item.target, iconCls: 'icon-save' });
$('#ss').iSearchbox('selectName', 'sports');

selectName方法示例：

$('#ss').iSearchbox('selectName', 'sports');