EasyUI 搜索框
1、用法
（1）、从标记创建。把 'easyui-searchbox' class 加入到 <input> 标记。
- <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>
（2）、编程创建。
- <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'
- });
2、属性
|
名称 |
类型 |
描述 |
默认值 |
|
width |
number |
组件的宽度。 |
auto |
|
height |
number |
组件的高度。该属性自版本 1.3.2 起可用。 |
22 |
|
prompt |
string |
显示在输入框里的提示信息。 |
'' |
|
value |
string |
输入的值。 |
'' |
|
menu |
selector |
搜索类型的菜单。每个菜单项可以有下列的属性： |
null |
|
searcher |
function(value,name) |
当用户按下搜索按钮或者按下 ENTER 键时，searcher 函数将被调用。 |
null |
3、方法
|
名称 |
参数 |
描述 |
|
options |
none |
返回选项（options）对象。 |
|
menu |
none |
返回搜索类型的菜单对象。 |
|
textbox |
none |
返回文本框对象。 |
|
getValue |
none |
返回当前的搜索值。 |
|
setValue |
value |
设置新的搜索值。 |
|
getName |
none |
返回当前的搜索类型名称。 |
|
selectName |
name |
选择当前的搜索类型名称。 |
|
destroy |
none |
销毁该组件。 |
|
resize |
width |
重设组件的宽度。 |
4、实例
（1）、基本搜索框
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Basic SearchBox - jQuery EasyUI Demo</title>
- <link rel="stylesheet" type="text/css" href="../css/easyui.css">
- <link rel="stylesheet" type="text/css" href="../css/icon.css">
- <link rel="stylesheet" type="text/css" href="../css/demo.css">
- <script type="text/javascript" src="../js/jquery.min.js"></script>
- <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
- </head>
- <body>
- <h2>Basic SearchBox</h2>
- <p>Click search button or press enter key in input box to do searching.</p>
- <div style="margin:20px 0;"></div>
- <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:300px"></input>
- <script>
- function doSearch(value){
- alert('You input: ' + value);
- }
- </script>
- </body>
- </html>
（2）、搜索框类别
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Search Category - jQuery EasyUI Demo</title>
- <link rel="stylesheet" type="text/css" href="../css/easyui.css">
- <link rel="stylesheet" type="text/css" href="../css/icon.css">
- <link rel="stylesheet" type="text/css" href="../css/demo.css">
- <script type="text/javascript" src="../js/jquery.min.js"></script>
- <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
- </head>
- <body>
- <h2>Search Category</h2>
- <p>Select a category and click search button or press enter key in input box to do searching.</p>
- <div style="margin:20px 0;"></div>
- <input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" style="width:300px"></input>
- <div id="mm">
- <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
- <div data-options="name:'sports'">Sports News</div>
- </div>
- <script>
- function doSearch(value,name){
- alert('You input: ' + value+'('+name+')');
- }
- </script>
- </body>
- </html>
