1、用法

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

  1. <script type="text/javascript">
  2. function qq(value,name){
  3. alert(value+":"+name)
  4. }
  5. </script>
  6. <input id="ss" class="easyui-searchbox" style="width:300px"
  7. data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>
  8. <div id="mm" style="width:120px">
  9. <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
  10. <div data-options="name:'sports'">Sports News</div>
  11. </div>

（2）、编程创建。

  1. <input id="ss"></input>
  2. <div id="mm" style="width:120px">
  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）、基本搜索框

  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 style="margin:20px 0;"></div>
  16. <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:300px"></input>
  17. <script>
  18. function doSearch(value){
  19. alert('You input: ' + value);
  20. }
  21. </script>
  22. </body>
  23. </html>

（2）、搜索框类别

    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 style="margin:20px 0;"></div>
    16. <input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" style="width:300px"></input>
    17. <div id="mm">
    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>

EasyUI 搜索框的更多相关文章

  1. Easyui 搜索框的折叠与展开方法

    HTML 文件: <div id="searchForm" region="north" title="XXXX查询" collaps ...

  2. easyui源码翻译1.32--SearchBox（搜索框）

    前言 使用$.fn.searchbox.defaults重写默认值对象.下载该插件翻译源码 搜索框提示用户需要输入搜索的值.它可以结合一个菜单,允许用户选择不同的搜索类别.在用户按下回车键或点击组件右 ...

  3. EasyUI基础searchbox&amp;progressbar(搜索框，进度条)

    easyui学习的基本组成部分(八个部分)硕果仅存searchbox和pargressbar.tooltip该,有一点兴奋.本文将偏向searchbox和pargressbar做一个探讨.鉴于双方的内 ...

  4. 第二百一十节，jQuery EasyUI，SearchBox(搜索框)组件

    jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组 ...

  5. .net+easyui系列--搜索框

    <input id="ss" style="width: 320px"> </input> <div id="mm&qu ...

  6. easyui 设置一加载，搜索框立即弹出的效果

    1.部分html文件 <div id="searchForm" region="north" title="标的查询" collaps ...

  7. 关于EasyUI datagrid editor combogrid搜索框的实现

    首先需要datagrid editor对combogrid的扩展,这个是别人实现的: $.extend($.fn.datagrid.defaults.editors, { combogrid: { i ...

  8. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  9. WPF 自定义搜索框

      控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2. ...

随机推荐

  1. OpenXml读取word内容注意事项

    OpenXml读取word内容注意事项 1.使用OpenXml读取word内容,word后缀必须是".docx":如果word后缀是".doc"需要转成&quo ...

  2. pythonl练习笔记——threading线程中的事件Event

    1 事件Event 使用方法:e = threading.Event() Event对象主要用于线程间通信,确切地说是用于主线程控制其他线程的执行. Event事件提供了三个方法:wait等待.cle ...

  3. Python学习笔记015——汉字编码

    1 字符串的编码(encode)格式 GB2312   GBK   GB18030  UTF-8  ASCII 其中常用的编码格式有 国标系列:GB18030(GBK(GB2312)) (window ...

  4. 如何利用JConsole观察分析JAVA程序的运行

    今天在CSDN看到一朋友说关于对JVM的研究,正好看到有关于jconsole的文章,特意找了下资料,留着备用 ps:jconsole建议用JDK1.6的1.5的界面太简陋了,另外还有增强版jvisua ...

  5. go学习笔记（3） -- package fmt

    package fmt fmt包实现了格式化的I/O函数,这点类似C语言中的printf和scanf,但是更加简单,其中的格式“占位符”衍生自 C 占位符 一般占位符 布尔占位符 浮点数及其复合构成占 ...

  6. JMeter学习笔记---作用域规则

    JMeter测试树中既包含遵循分层规则的测试元件(监听器.配置元件.后置处理器.前置处理器.断言.定时器),又包含遵循顺序规则的测试元件(逻辑控制器.采样器),测试人员创建测试计划的同时,实际上就创建 ...

  7. linux下core dump

    1.前言 一直在从事linux下后台开发,经常与core文件打交道.还记得刚开始从事linux下开发时,程序突然崩溃了,也没有任何日志.我不知所措,同事叫我看看core,我却问什么是core,怎么看. ...

  8. php四种排序算法实现代码

    分享php排序的四种算法与代码. 冒泡:function bubble_sort($arr){ $num = count($arr); for($i=0;$i<$num;$i++){ for($ ...

  9. 批处理学习笔记11 - del命令和rd命令

    这两个命令都是删除,所以放一块说了 del 删除文件 rd 删除目录(文件夹) ------------------------------------------------------------ ...

  10. Win7  CMD大全

    Win7  CMD大全  compmgmt.msc---计算机管理 conf—-启动 netmeeting charmap–-启动字符映射表 calc—-启动计算器 chkdsk.exe–-Chkds ...