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 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
详解a++和++a的区别
Aug 30 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
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利用str_replace防注入的方法
2013/11/10 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
简单谈谈python中的多进程
2016/11/06 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
python3对接mysql数据库实例详解
2019/04/30 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python 实现生成均匀分布的点
2019/12/05 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
恶意软件的定义
2014/11/12 面试题
毕业生求职信的经典写法
2014/01/31 职场文书
2014年工会工作总结
2014/11/12 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript