您的位置：首页 > 产品设计 > UI/UE

Easyui笔记1：实现combobox下拉框检索匹配功能

2017-01-13 23:38 399 查看

最近项目中正在使用easyui。本系列文章会记录我在easyui使用中淌过的坑和一些功能的实现方法，用于经验分享以及日后查阅。欢迎转载，转载请注明出处，谢谢~(作者：Colton_Null)

如何在Easyui中实现combobox下拉框输入检索功能?

只需要在combobox属性中设置

editable : true, limitToList : true 即可

editable

为true时用户可以直接输入文本到字段中

limitToList

设置为true时，输入的值只能是列表框中的内容。（该属性自1.5版开始可用）

效果如图所示

html代码：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="easyui_1.5/jquery.min.js"></script>
<link rel="stylesheet" href="easyui_1.5/themes/icon.css">
<link rel="stylesheet" href="easyui_1.5/themes/bootstrap/easyui.css">

<script type="text/javascript" src="easyui_1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui_1.5/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript" src="js/comboboxSearch.js"></script>
</head>
<body>
<div>
<table id="dg"></table>
</div>
</body>
</html>

js代码：

$(function () {
$('#dg').datagrid({
width: '500px',
height: '200px',
title : '下拉框搜索功能测试表',
fitColumns: true,
rownumbers: true,
columns: [[
{
field: 'test',
title: '测试列',
width: '20%',
editor: {
type: 'combobox',
options: {
editable: true,
limitToList: true,
valueField: 'value',
textField: "text",
panelMaxHeight : '200',
data: [{
value: '士兵76',
text: '士兵76'
}, {
value: '海贼王',
text: '海贼王'
}, {
value: '行尸走肉',
text: '行尸走肉'
}, {
value: '士兵77',
text: '士兵77'
},{
value: '瑞文',
text: '瑞文'
}, {
value: 'java',
text: 'java'
}, {
value: 'javascript',
text: 'javascript'
}, {
value: '瑞典',
text: '瑞典'
}]
}
}
}
]],
onClickRow : function (index,row) {
$('#dg').datagrid('beginEdit',index);
}
});

4000
$('#dg').datagrid('appendRow',{});

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： easyui combobox 前端 js

相关文章推荐

新的分享

章节导航