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. iOS - Label 数字动态变化

    1.数字动态变化 具体实现代码见 GitHub 源码 QExtension QCountingLabel.h /// 文本数字变化方式枚举 typedef NS_ENUM(NSUInteger, QC ...

  2. 【js】appendChild

    appendChild主要是用来追加节点插入到最后:循环的时候由于不停的搬家导致length在改变.     使用for循环 <!Doctype html> <html xmlns= ...

  3. Asp.Net Core 轻松学-一行代码搞定文件上传 JSONHelper

    Asp.Net Core 轻松学-一行代码搞定文件上传   前言     在 Web 应用程序开发过程中,总是无法避免涉及到文件上传,这次我们来聊一聊怎么去实现一个简单方便可复用文件上传功能:通过创建 ...

  4. Jmeter----HTTP Request Defaults

    一.HTTP Request Defaults的作用: 该组件可以为我们的http请求设置默认的值.假如,我们创建一个测试计划有很多个请求且都是发送到相同的server,这时我们只需添加一个Http ...

  5. 安装R语言的包的方法

    安装R语言的包的方法: 1. 在线安装 在R的控制台,输入类似install.packages("TSA")  # 安装 TSA install.packages("TS ...

  6. 命令行查询DELL服务器信息序列号

    Windows 获取序列号>wmic bios get serialnumber 获取机型信息>wmic csproduct get vendor,name,identifyingnumb ...

  7. django post和get 比较

    当我们提交表单仅仅需要获取数据时就可以用GET: 而当我们提交表单时需要更改服务器数据的状态,或者说发送e-mail,或者其他不仅仅是获取并显示数据的时候就使用POST. 在这个搜索书籍的例子里,我们 ...

  8. thinkphp中获取参数值的方法

    以获取$type这个参数为例:一:通过传统方法:$_GET, $_POST    $type = intval($_GET['type'])这种方法需要自己写过滤规则,保证数据安全. 二:在Actio ...

  9. Java：集合，Collection接口框架图

    Java集合大致可分为Set.List和Map三种体系,其中Set代表无序.不可重复的集合:List代表有序.重复的集合:而Map则代表具有映射关系的集合.Java 5之后,增加了Queue体系集合, ...

  10. Java：多线程，线程同步，同步锁（Lock）的使用（ReentrantLock、ReentrantReadWriteLock）

    关于线程的同步,可以使用synchronized关键字,或者是使用JDK 5中提供的java.util.concurrent.lock包中的Lock对象.本文探讨Lock对象. synchronize ...