Jquery Easyui Search Box component SearchBox use details () _jquery

This example for you to share the jquery Easyui search box components of the implementation code for your reference, the specific contents are as follows

Load mode

Class load

 <input id= "ss" class= "Easyui-searchbox" style= "width:300px" data-options= "prompt
   : ' Please input Value ', menu: ' #box ' ">

 </input>
 <div id=" box "style=" width:120px ">
  <div data-options=" name: ' All ', Iconcls: ' Icon-ok ' > All news </div>
  <div data-options= "name: ' Sports '" > Anchovy news </div>
 </ Div>

JS Call load

 <input id= "ss"/>
 </input>
 <div id= "box" style= "width:120px" >
  <div data-options= " Name: ' All ', iconcls: ' Icon-ok ' ">all news</div>
  <div data-options=" name: ' Sports ' >sports /div>
 </div>

 <script>
  $ (function () {
   $ (' #ss '). SearchBox ({
    //component width
    : ,//
    component height
    height:30,//
    input value
    : ' Spord ',
    //Call searcher function
    when user presses search button or enter key Searcher:function (value, name) {
     alert (value + ', ' + Name ');
    },
    //Search Type menu
    : ' #box ',
    //on input box to display the prompt message.
    prompt: ' Please enter content ',
    //Disable search box
    disabled:false
   }
 ); </script>

Property List

Method List

   Returns the Property object
   console.log (' #ss '). SearchBox (' options '));
   Returns the text box object
   console.log (' #ss '). SearchBox (' textbox '));
   Returns the current index value
   console.log (' #ss '). SearchBox (' GetValue '));
   Changes the current index value
   $ (' #ss '). SearchBox (' setValue ', ' Change value ')
   //Select the specified search type
   $ (' #ss '). SearchBox (' Selectname ', ' Sports ');
   Returns the current index type value
   console.log (' #ss '). SearchBox (' getName '));
   Resets the search box width
   $ (' #ss '). SearchBox (' resize ');
   Destroy the search box
   $ (' #ss '). SearchBox (' destroy ');
   Disable and enable
   $ (' #ss '). SearchBox (' disable ');
   $ (' #ss '). SearchBox (' Enable ');
   Clean up the contents of the search box
   $ (' #ss '). SearchBox (' clear ');
   Reset the contents of the search box
   $ (document). DblClick (function () {
    $ (' #ss '). SearchBox (' reset ');
   };
   Returns the type name Object
   var m = $ (' #ss '). SearchBox (' menu ');
   var item = m.menu (' FindItem ', ' Sport ');
   M.menu (' SetIcon ', {
    target:item.target,
    iconcls: ' Icon-save '
   });
   You can use $.fn.searchbox.defaults to override the default value object.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.