EasyUI实现带搜索框的列表页面(一)——前台实现

1、用法

(1)、从标记创建。把 'easyui-searchbox' class 加入到 <input> 标记。

[html]view plaincopy

EasyUI实现带搜索框的列表页面(一)——前台实现EasyUI实现带搜索框的列表页面(一)——前台实现
  1. <script type="text/javascript">
  2. function qq(value,name){
  3. alert(value+":"+name)
  4. }
  5. </script>
  6. <input class="easyui-searchbox"
  7. data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>
  8. <div >
  9. <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
  10. <div data-options="name:'sports'">Sports News</div>
  11. </div>

(2)、编程创建。

[html]view plaincopy

EasyUI实现带搜索框的列表页面(一)——前台实现EasyUI实现带搜索框的列表页面(一)——前台实现
  1. <input ></input>
  2. <div >
  3. <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
  4. <div data-options="name:'sports'">Sports News</div>
  5. </div>
  6. $('#ss').searchbox({
  7. searcher:function(value,name){
  8. alert(value + "," + name)
  9. },
  10. menu:'#mm',
  11. prompt:'Please Input Value'
  12. });

2、属性

名称

类型

描述

默认值

width

number

组件的宽度。

auto

height

number

组件的高度。该属性自版本 1.3.2 起可用。

22

prompt

string

显示在输入框里的提示信息。

''

value

string

输入的值。

''

menu

selector

搜索类型的菜单。每个菜单项可以有下列的属性:

name:搜索类型名称。

selected:当前选择的搜索类型名称。

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)、基本搜索框

[html]view plaincopy

EasyUI实现带搜索框的列表页面(一)——前台实现EasyUI实现带搜索框的列表页面(一)——前台实现
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Basic SearchBox - jQuery EasyUI Demo</title>
  6. <link rel="stylesheet" type="text/css" href="../css/easyui.css">
  7. <link rel="stylesheet" type="text/css" href="../css/icon.css">
  8. <link rel="stylesheet" type="text/css" href="../css/demo.css">
  9. <script type="text/javascript" src="../js/jquery.min.js"></script>
  10. <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
  11. </head>
  12. <body>
  13. <h2>Basic SearchBox</h2>
  14. <p>Click search button or press enter key in input box to do searching.</p>
  15. <div ></div>
  16. <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" ></input>
  17. <script>
  18. function doSearch(value){
  19. alert('You input: ' + value);
  20. }
  21. </script>
  22. </body>
  23. </html>

EasyUI实现带搜索框的列表页面(一)——前台实现

(2)、搜索框类别

[html]view plaincopy

EasyUI实现带搜索框的列表页面(一)——前台实现EasyUI实现带搜索框的列表页面(一)——前台实现
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Search Category - jQuery EasyUI Demo</title>
    6. <link rel="stylesheet" type="text/css" href="../css/easyui.css">
    7. <link rel="stylesheet" type="text/css" href="../css/icon.css">
    8. <link rel="stylesheet" type="text/css" href="../css/demo.css">
    9. <script type="text/javascript" src="../js/jquery.min.js"></script>
    10. <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    11. </head>
    12. <body>
    13. <h2>Search Category</h2>
    14. <p>Select a category and click search button or press enter key in input box to do searching.</p>
    15. <div ></div>
    16. <input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" ></input>
    17. <div >
    18. <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
    19. <div data-options="name:'sports'">Sports News</div>
    20. </div>
    21. <script>
    22. function doSearch(value,name){
    23. alert('You input: ' + value+'('+name+')');
    24. }
    25. </script>
    26. </body>
    27. </html>

转载于:https://www.cnblogs.com/huangf714/p/5864388.html