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>