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 相关文章推荐
Textarea与懒惰渲染实现代码
Jan 04 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
ie focus bug 解决方法
2009/09/03 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
python简单程序读取串口信息的方法
2015/03/13 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
Python之字典添加元素的几种方法
2020/09/30 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
研究生毕业自我鉴定范文
2014/03/27 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
电视新闻稿
2015/07/17 职场文书
2016高考寄语集锦
2015/12/04 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
Java中try catch处理异常示例
2021/12/06 Java/Android
python manim实现排序算法动画示例
2022/08/14 Python
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android