❮ Jqueryeasyui Tutorial Plugins Window Window ❯

jQuery EasyUI Basic Plugin - `Searchbox`

The default defaults can be rewritten through $.fn.searchbox.defaults.

The searchbox prompts the user to enter a search value. It can be combined with a menu that allows users to select different search categories. The search action is executed when the user presses the ENTER key or clicks the search button on the right side of the component.

Dependencies

menubutton

Usage

Creating a Searchbox

Create from markup. Add the 'easyui-searchbox' class to the <input> tag.

<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>

Programmatically create.

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

Properties

Name	Type	Description	Default Value
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 displayed in the input box.	''
value	string	The input value.	''
menu	selector	The menu for search types. Each menu item can have the following properties: <br>name: The name of the search type. <br>selected: The currently selected search type name. <br> <br>The following example shows how to define a selected search type name. <input class="easyui-searchbox" style="width:300px" data-options="menu:'#mm'" /><br><div id="mm" style="width:150px"><br> <div data-options="name:'item1'">Search Item1</div><br> <div data-options="name:'item2',selected:true">Search Item2</div><br> <div data-options="name:'item3'">Search Item3</div><br></div>	null
searcher	function(value,name)	The searcher function is called when the user presses the search button or the ENTER key.	null

Methods

Name	Parameters	Description
options	none	Returns the options object.
menu	none	Returns the menu object for search types. <br>The following example shows how to change the menu item icon. var m = $('#ss').searchbox('menu'); // get the menu object<br>var item = m.menu('findItem', 'Sports News'); // find the menu item<br>// change the menu item icon<br>m.menu('setIcon', {<br> target: item.target,<br> iconCls: 'icon-save'<br>});<br>// select the searching type name<br>$('#ss').searchbox('selectName', 'sports');
textbox	none	Returns the textbox object.
getValue	none	Returns the current search value.
setValue	value	Sets the new search value.
getName	none	Returns the current search type name.
selectName	name	Selects the current search type name. <br>Code example: $('#ss').searchbox('selectName', 'sports');
destroy	none	Destroys the component.
resize	width	Resizes the component's width.