SearchBox

Extend from $.fn.textbox.defaults. 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

  • textbox
  • menubutton

Usage Example

Create SearchBox

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

2. Create programatically.


Properties

Name Type Description Default
width number The width of the component. auto
height number The height of the component. 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
showEvent string The event that cause the menu to appear. mouseenter
hideEvent string The event that cause the menu to disappear. mouseleave
searcher function(value,name) The searcher function that will be called when user presses the searching button or press ENTER key. null
disabled boolean Defines if to disable the searchbox. Available since version 1.3.6. false

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.
disable none Disable the searchbox. Available since version 1.3.6.
enable none Enable the searchbox. Available since version 1.3.6.
clear none Clear the searching value. Available since version 1.3.6.
reset none Reset the searching value. Available since version 1.3.6.