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. Hadoop On Demand

    原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/hod.html 简介 文档 简介 Hadoop On Demand(HOD)是一个能在大型物理集群上供应虚拟 ...

  2. 未能找到类型集或命名空间名称 "xxxxxx" (是否缺少using 指令或引用?)

    “未能找到类型或命名空间名称XXXX”,以往遇到这种情况第一时间想到就是没有引用需要的dll. 但今天我反复检查了好几次,还是没有解决问题.我注意到除了错误信息,还有几个警告信息“未能解析引用的程序集 ...

  3. 如何生成KeyStore

    介绍如何生成keystore cmd下: 进入到jdk的bin目录,这样的话,android.keystore文件就会生成在这个目录下,签名的时候我们需要这个文件. C:\Program Files\ ...

  4. GDI+绘制简单图形

    #include <windows.h>#include <gdiplus.h>using namespace Gdiplus;#pragma comment(lib, &qu ...

  5. Python cos() 函数

    描述 cos() 返回x的弧度的余弦值. 语法 以下是 cos() 方法的语法: import math math.cos(x) 注意:cos()是不能直接访问的,需要导入 math 模块,然后通过 ...

  6. struts2 页面标签或ognl表达式取值--未完待续

    一.加#号取值和不加#号取值的解说 1.s:property 标签——value属性使用事项 1)涉及问题:取值时什么时候该加#,什么时候不加? 2)介绍 <s:property value=& ...

  7. spring sessionFactory 属性配置详解，applicationContext中各种属性详解

    1.Bean的id为sessionFactory,对应的类为AnnotationSessionFactory,即采用注解的形式实现hibernate. 2.hibernateProperties,配置 ...

  8. php-fpm 启动参数及重要配置详解(转)

    约定几个目录 /usr/local/php/sbin/php-fpm /usr/local/php/etc/php-fpm.conf /usr/local/php/etc/php.ini 一,php- ...

  9. jeecg 定时任务配置用法

    方式一: 1.定时任务配置文件 src/main/resources/spring-mvc-timeTask.xml 2.新定义一个定时任务举例 a.配置定时任务,配置文件spring-mvc-tim ...

  10. Visual Studio 中突出显示的引用

    有时候代码中处理的变量多了,看起代码来就比较的费劲,有时想看一个变量都在哪里用到了,还要一个一个的去仔细分辨. 一.VS2012本身就提供了选中提示功能 但是本身带的这个选中提示功能颜色比较浅,不过这 ...