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. C#中?和:?和??总结

    ?代表可空类型修饰符    引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.为了使值类型也可为空,就可以使用可空类型?:三元表达式    int a=b>c?b:c 如果b大 ...

  2. oracle导表小结

    事件描述:从A主机oracle服务器导出.sql文件到B主机,发现1.导入存在乱码 2.提示USERS表空没有权限(A B主机均为window系统) 1.针对第一点乱码 首先确认系统的默认字符编码GB ...

  3. 最短路径 - 迪杰斯特拉(Dijkstra)算法

    对于网图来说,最短路径,是指两顶点之间经过的边上权值之和最少的路径,并且我们称路径上的第一个顶点为源点,最后一个顶点为终点.最短路径的算法主要有迪杰斯特拉(Dijkstra)算法和弗洛伊德(Floyd ...

  4. C语言中续行符“\”说明

    把一个预处理指示写成多行要用“\”续行,因为根据定义,一条预处理指示只能由一个逻辑代码行组成. 而把C代码写成多行则不必使用续行符,因为换行在C代码中只不过是一种空白字符,在做语法解析时所有空白字符都 ...

  5. eclipse3.7之后，在引入的jquery的js文件打红叉

    使用Eclipse 3.7时,工程中加入jquery.xx.js文件,发现该文件出现错误提示(红×),但使用Eclipse 3.7以前的版本就不会出现这种提示.是因为Eclipse 3.7在.proj ...

  6. java mac install

    http://docs.oracle.com/javase/8/docs/technotes/guides/install/mac_jdk.html#A1096855 This page descri ...

  7. unity3d 通过添加rigidBody来指明物体是动态的，以避免cache开销

    unity3d 通过添加rigidBody来指明物体是动态的,以避免cache开销. 如果不添加rigidBody,则unity会认为它是静态的,会对物理计算进行cache,但如果此物体实际上tran ...

  8. js检查页面上有无重复id的代码分享

    用js代码检查一个页面上是否用重复的id. 方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...

  9. RhinoMock中无参数方法和无返回值方法的使用

    无返回值方法,RhinoMock的例子是这么做的: demo.VoidThreeArgs(, "", 0f); LastCall.On(demo).Callback<int, ...

  10. Kibana查询说明

    elasticsearch构建在Lucene之上,过滤器语法和Lucene相同 Kibana接口概述 Kibana接口分为四个主要部分: 发现 可视化 仪表板 设置 我们将按照列出的顺序浏览每个部分的 ...