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

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

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

实现的效果如下：

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

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

代码如下：

setp1、创建combobox

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。