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 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 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
Function eregi is deprecated (解决方法)
2013/06/21 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
python:socket传输大文件示例
2017/01/18 Python
python 内置模块详解
2019/01/01 Python
Django之模型层多表操作的实现
2019/01/08 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
python+tkinter实现学生管理系统
2019/08/20 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
东方红海科技面试题软件测试方面
2012/02/08 面试题
会计专业应届生自荐信
2014/06/28 职场文书
销售员态度差检讨书
2014/10/26 职场文书
童年读书笔记
2015/06/26 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
小组组名及励志口号
2015/12/24 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技