SearchBox

Override defaults with $.fn.searchbox.defaults.

The searchbox prompt the user to enter search value. It can combine a menu that allows the user to select different searching category. The searching action will be executed when the user press ENTER key or click the search button on the right of component.

Dependencies

Usage Example

Create SearchBox

1. Create from markup. Add 'easyui-searchbox' class to <input/> markup.

  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. Create programatically.

  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. });

Properties

Name Type Description Default
width number The width of the component. auto
height number The height of the component. This property is available since version 1.3.2. 22
prompt string The prompt message to be displayed in input box. ''
value string The inputed value. ''
menu selector The search type menu. Each menu item can has below attribute:
name: the search type name.
selected: current selected search type name.

The example below shows how to define a selected searching type name.

<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) The searcher function that will be called when user presses the searching button or press ENTER key. null

Methods

Name Parameter Description
options none Return the options object.
menu none Return the search type menu object. The example below shows how to change the menu item icon.
var m = $('#ss').searchbox('menu');  // get the menu object
var item = m.menu('findItem', 'Sports News');  // find the menu item
// change the menu item icon
m.menu('setIcon', {
	target: item.target,
	iconCls: 'icon-save'
});
// select the searching type name
$('#ss').searchbox('selectName', 'sports');
textbox none Return the text box object.
getValue none Return the current searching value.
setValue value Set a new searching value.
getName none Return the current searching type name.
selectName name Select the current searching type name.

Code example:

$('#ss').searchbox('selectName', 'sports');
destroy none Destroy this component.
resize width Reset the component width.