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

2019-11-19 18:14:42

字体：大中小

来源：转载

供稿：网友

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

实现的效果如下：

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

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即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js使用Replace结合正则替换重复出现的字符串功能示例

下一篇：jQuery获取选中单选按钮radio的值