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 相关文章推荐
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
webpack入门+react环境配置
Feb 08 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
js实现简单音乐播放器
Jun 30 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获取apk包信息的方法
2014/08/15 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
js实现随机点名功能
2020/12/23 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
python批量修改文件后缀示例代码分享
2013/12/24 Python
python实现在pickling的时候压缩的方法
2014/09/25 Python
python 异或加密字符串的实例
2018/10/14 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
详解如何修改python中字典的键和值
2020/09/29 Python
python ssh 执行shell命令的示例
2020/09/29 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
经理管理专业自荐信范文
2013/12/31 职场文书
入股协议书范本
2014/04/14 职场文书
商务经理岗位职责
2014/07/30 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
外科护士长工作总结
2015/08/12 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android