easyUI实现类似搜索框关键词自动提示功能示例代码


Posted in Javascript onDecember 27, 2016

在一个DataGrid里面,搜索行所在位置

实现的效果如下:

easyUI实现类似搜索框关键词自动提示功能示例代码

在搜索框中输入部分列名关键字,即可匹配到行的位置。

EasyUI的SearchBox组件只提供了静态搜索框,我们可以使用ComboBox来实现动态的自动关键匹配效果,并且不需要加载远程数据。当前页面的DataGrid的数据我们可以直接在本地获取之。

代码如下:

setp1、创建combobox

<div style="text-align: left;background-color: #E0ECFF;padding-left: 10px;padding-top: 5px;"> 
  <div id="searchField" style="width:250px"></div> 
</div>

step2、实现本地数据加载

$("#searchField").combobox({ 
  loader: function(param,success,error){ 
    //获取输入的值 
    var q = param.q || ""; 
    //此处q的length代表输入多少个字符后开始查询 
    if(q.length <= 0) return false; 
    var rows = $('#fieldList').datagrid('getRows'); 
    var items = $.map(rows, function (item, index) { 
      //匹配条件,忽略大小写 
      if(item.fieldName && (item.fieldName.toLowerCase().indexOf(q.toLowerCase()) != -1)){ 
        return { 
          "fieldName": item.fieldName 
        }; 
      } 
    }); 
    success(items); 
  }, 
  onBeforeLoad:function () { 
    //设置placeholder 
    $("input[class='textbox-text validatebox-text textbox-prompt']").attr("placeholder","输入标注字段,定位所在行"); 
  }, 
  mode: 'remote', 
  textField:'fieldName', 
  valueField:'fieldName', 
  onSelect : function(record){ 
    var $filedList = $('#fieldList'); 
    var rows = $filedList.datagrid('getRows'); 
    if(rows && rows.length > 0){ 
      for(var r = 0 ; r < rows.length ; r++){ 
        if(rows[r].fieldName == record.fieldName){ 
          $filedList.datagrid('selectRow',r); 
          break; 
        } 
      } 
    } 
  } 
});

load是一个适配器,它将本地数据转换成combobox所需的数据格式:

var rows = $('#fieldList').datagrid('getRows'); 
var items = $.map(rows, function (item, index) { 
  //匹配条件,忽略大小写 
  if(item.fieldName && (item.fieldName.toLowerCase().indexOf(q.toLowerCase()) != -1)){ 
    return { 
      "fieldName": item.fieldName 
    }; 
  } 
});

首先我们通过datagrid的getRows方法获取当前数据表的所有行,然后通过map转换。

success(items);

到此就完成了数据的转换

step3、实现行的选中

onSelect : function(record){ 
    var $filedList = $('#fieldList'); 
    var rows = $filedList.datagrid('getRows'); 
    if(rows && rows.length > 0){ 
      for(var r = 0 ; r < rows.length ; r++){ 
        if(rows[r].fieldName == record.fieldName){ 
          $filedList.datagrid('selectRow',r); 
          break; 
        } 
      } 
    } 
  }

在onSelect事件中,匹配所在行调用selectRow即可。

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

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
浅析javascript的return语句
Dec 15 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 #Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 #Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 #Javascript
TypeScript学习之强制类型的转换
Dec 27 #Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 #Javascript
详解js的六大数据类型
Dec 27 #Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 #Javascript
You might like
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
js计算页面刷新的次数
2009/07/20 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
简单了解Python3里的一些新特性
2019/07/13 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
开水果连锁店创业计划书
2013/12/29 职场文书
自我鉴定总结
2014/03/24 职场文书
公务员政审个人总结
2015/02/12 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python