EasyUI 搜索框

最新推荐文章于 2021-06-04 12:10:02 发布
最新推荐文章于 2021-06-04 12:10:02 发布
阅读量125 收藏
点赞数
文章标签： javascript ViewUI

1、用法

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

 

[html]  view plain  copy
 
 在CODE上查看代码片派生到我的代码片
  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）、编程创建。

 

[html]  view plain  copy
 
 在CODE上查看代码片派生到我的代码片
  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）、基本搜索框

 

[html]  view plain  copy
 
 在CODE上查看代码片派生到我的代码片
  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）、搜索框类别

 

[html]  view plain  copy
 
 在CODE上查看代码片派生到我的代码片
    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>  
weixin_33762321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyUI入门《四、searchbox基础：搜索框》
雷嘉辉的博客
09-03 217
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;!--引入基本库--&gt; &lt;script type="text/javascr
JQUERY-EASYUI添加搜索框
01-17
jquery-easyui+插件jquery-searchbox在datagrid中添加搜索框
EasyUI之搜索框searchbox
牛栏山矿泉水
10-28 409
1、实例背景 EasyUI中searchbox搜索框，输入值后点击搜索图标，可以打印出值 2、实例源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;EasyUI之搜索框searchbox&lt;/title&gt; &lt;lin
EasyUI-基本搜索框
dxm809的博客
04-06 304
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
jQuery EasyUI，SearchBox(搜索框)组件
qq_40435659的博客
04-27 1945
jQuery EasyUI，SearchBox(搜索框)组件 学习要点：　　1.加载方式　　2.属性列表　　3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法，这个组件依赖于 MenuButton(按钮)组件。 一．加载方式class 加载方式&lt;!--搜索框--&gt; &lt;input id="ss" class="easyui-searchbox...
EasyUI中搜索框的简单使用
BADAO_LIUMANG_QIZHI的博客
06-05 961
场景 基本搜索框 流式搜索框 搜索框类别 实现 基本搜索框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框</title> <link rel="stylesheet" t...
easyUI searchBox搜索框的实现
快乐de馒头
05-19 1228
增加 　　删除 　　编辑 　　2.js 　　//循环列名，生成搜索的下拉列表 　　var fields = $('#datagrid')。datagrid('getColumnFields'); 　　var muit=""; 　　for(var i=0; i"+ opts.title +""; 　　}; 　　$('#searchMenu')。html($('#searchMenu...
Jquery-easyui添加搜索框
08-18
Jquery-easyui添加搜索框,
Jquery Easyui搜索框组件SearchBox使用详解（19）
12-29
本文实例为大家分享了Jquery Easyui搜索框组件的实现代码，供大家参考，具体内容如下 加载方式 Class加载 <input id=ss class=easyui-searchbox style=width:300px data-options=prompt:'Please Input Value',menu:'#box'> </input> <div id=box xss=removed> <div data-options=name:>所有新闻</div> <div dat
easyUI实现类似搜索框关键词自动提示功能示例代码
08-31
本篇文章主要介绍了easyUI实现类似搜索框关键词自动提示功能示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
【EasyUI篇】SearchBox搜索框组件
ouYang的博客
09-16 4111
微信公众号：程序yuan 关注可了解更多的教程。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 18.SearchBox搜索框组件         JSP文件 &lt;%--   Created by IntelliJ IDEA.   User: ooyhao   Date: 2018/7/29 0029   Time: 9:21 --%&...
运用EasyUI 进行输入框数据检索
Yu_0901的博客
11-30 1174
运用EasyUI 进行输入框数据检索： required:true和missingMessage:’账号不能为空’，用来设置输入框不能为空 JavaScript代码：设置输入框长度 写一个方法来判断效验结果，看是否可以进行登录补充：关于验证密码和确认密码是否相同 一般的输入框效验就这些了，谢谢大家。第一次写博客有什么不好的地方，请谅解，欢迎指正，大家一起进步。。。加油。。。
html 列表页 头部搜索框,EasyUI实现带搜索框的列表页面（一）——前台实现
weixin_42350951的博客
06-04 577
基本思路引入EasyUI资源Datagrid组件实现初始化列表分页数据加载用form将搜索条件收集后转成json对象，向后台发送请求重新加载数据后台Controller层：定义搜索条件pojo类对请求数据进行封装接收后台Service层：调用mapper查询数据和总数，封装成结果对象返回后台Mapper层：根据查询条件对象进行数据查询、查询数据总数具体实现前台实现：1 引入EasyUI资源HTML...
easyui里的切换面板、右键功能实现和点击跳转面板等功能
Wxp7511的博客
05-10 1037
主要是sasyui框架选项卡跳转、选项卡右键功能
easyUI中选择下拉菜单和输入框的使用
i_am_tomato的专栏
08-05 8123
easyUI中选择下拉菜单和输入框的使用
EasyUi模糊匹配搜索框combobox
热门推荐
gaoshili001的专栏
01-30 1万+
现在项目当中很多已经应用了Jquery-easyUi这个界面框架了，所以，学习一点easyUI的常用工具就显得很重要了，现在介绍的就是我在项目中用到的easyUi的模糊匹配组合框combobox. combobox这个工具可以在用户输入一点前面的数据就会快速的查询出符合当前查询数据的所有数据。 这个工具只要在引入easyUI   jar包的Jsp页面中引用就可以了。 用法： 1、
easyui toolbar 搜索
最新发布
05-14
EasyUI Toolbar 是一个常用的网页 UI 组件，提供了一系列常用的工具栏（Toolbar）控件，包括按钮、下拉框、文本框等。如果你想在 EasyUI Toolbar 中添加搜索框，可以按照以下步骤进行： 1. 在 HTML 中添加一个搜索框的输入框，例如： ```html <input class="easyui-textbox" data-options="prompt:'Search...',iconCls:'icon-search',iconAlign:'left',buttonText:'Search'" style="width:200px;"> ``` 2. 在 JavaScript 中使用 easyui 方法来初始化 Toolbar，并将搜索框添加到工具栏中，例如： ```javascript $('#toolbar').toolbar('append', { text: 'Search:', iconCls: 'icon-search', align: 'left', items: [{ text: '', html: '<input class="easyui-textbox" data-options="prompt:\'Search...\',iconCls:\'icon-search\',iconAlign:\'left\',buttonText:\'Search\'" style="width:200px;">' }] }); ``` 其中，`#toolbar` 是 EasyUI Toolbar 的 ID，`text` 和 `iconCls` 分别表示搜索框前面的文本和图标，`items` 中包含了搜索框的 HTML 代码。 3. 如果需要在搜索框中输入文字后触发搜索事件，可以为搜索框添加 `onChange` 事件，例如： ```javascript $('.easyui-textbox').textbox({ onChange: function(newValue, oldValue) { // 处理搜索逻辑 } }); ``` 在 `onChange` 事件中，你可以编写相应的搜索逻辑，例如向服务器发送 AJAX 请求获取搜索结果，并将结果显示在页面上。 希望这些信息能够帮助你实现 EasyUI Toolbar 中的搜索框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值