Jquery Easyui搜索框组件SearchBox使用详解(19)


Posted in Javascript onDecember 17, 2016

本文实例为大家分享了Jquery Easyui搜索框组件的实现代码,供大家参考,具体内容如下

加载方式

Class加载

<input id="ss" class="easyui-searchbox" style="width:300px"
   data-options="prompt:'Please Input Value',menu:'#box'">

 </input>
 <div id="box" style="width:120px">
  <div data-options="name:'all',iconCls:'icon-ok'">所有新闻</div>
  <div data-options="name:'sports'">?鱼新闻</div>
 </div>

JS调用加载

<input id="ss" />
 </input>
 <div id="box" style="width:120px">
  <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
  <div data-options="name:'sports'">Sports News</div>
 </div>

 <script>
  $(function () {
   $('#ss').searchbox({
    // 组件宽度
    width : 500,
    // 组件高度
    height: 30,
    // 输入的值
    value : 'spord',
    // 在用户按下搜索按钮或回车键的时候调用 searcher 函数
    searcher : function (value, name) {
     alert(value + ',' + name);
    },
    // 搜索类型菜单
    menu : '#box',
    // 在输入框中显示提示消息。
    prompt : '请输入内容',
    // 是否禁用搜索框
    disabled: false
   });
  });
 </script>

属性列表

Jquery Easyui搜索框组件SearchBox使用详解(19)

方法列表

Jquery Easyui搜索框组件SearchBox使用详解(19)

//返回属性对象
   console.log($('#ss').searchbox('options'));
   //返回文本框对象
   console.log($('#ss').searchbox('textbox'));
   //返回当前索引值
   console.log($('#ss').searchbox('getValue'));
   //改变当前索引值
   $('#ss').searchbox('setValue','改变值')
   //选择指定的搜索类型
   $('#ss').searchbox('selectName', 'sports');
   //返回当前索引类型值
   console.log($('#ss').searchbox('getName'));
   //重置搜索框宽度
   $('#ss').searchbox('resize', 200);
   //销毁搜索框
   $('#ss').searchbox('destroy');
   //禁用和启用
   $('#ss').searchbox('disable');
   $('#ss').searchbox('enable');
   //清理搜索框内容
   $('#ss').searchbox('clear');
   //重置搜索框内容
   $(document).dblclick(function () {
    $('#ss').searchbox('reset');
   });
   //返回类型名对象
   var m = $('#ss').searchbox('menu');
   var item = m.menu('findItem', '体育');
   m.menu('setIcon', {
    target: item.target,
    iconCls: 'icon-save'
   });
   //可以使用$.fn.searchbox.defaults 重写默认值对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中创建对象的几种方式示例介绍
Jan 26 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 #Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 #Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 #Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 #Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 #Javascript
深入理解JS继承和原型链的问题
Dec 17 #Javascript
Bootstrap CSS组件之输入框组
Dec 17 #Javascript
You might like
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php中apc缓存使用示例
2013/12/25 PHP
php分页代码学习示例分享
2014/02/20 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
javascript 必知必会之closure
2009/09/21 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
canvas时钟效果
2017/02/16 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
Node.js pipe实现源码解析
2017/08/12 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python中模块string.py详解
2017/03/12 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python标记语句块使用方法总结
2019/08/05 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
机电一体化自荐信
2013/12/10 职场文书
家长给老师的道歉信
2014/01/13 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
企业员工培训感言
2014/02/26 职场文书
员工生日活动方案
2014/08/24 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
工伤私了协议书范本
2014/11/24 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android
git中cherry-pick命令的使用教程
2022/06/25 Servers