SearchBox

Override defaults with $.fn.searchbox.defaults.

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"  
  7.         searcher="qq"  
  8.         prompt="Please Input Value" menu="#mm" style="width:300px"></input>  
  9.           
  10. <div id="mm" style="width:120px">  
  11.     <div name="all" iconCls="icon-ok">All News</div>  
  12.     <div name="sports">Sports News</div>  
  13. </div>  

2. Create programatically.

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

Properties

Name Type Description Default
width number Set the component width. auto
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.
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.
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.
destroy none Destroy this component.
resize width Reset the component width.