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

最新推荐文章于 2024-04-08 17:39:55 发布

因特马

最新推荐文章于 2024-04-08 17:39:55 发布

阅读量7.4k

点赞数 2

分类专栏： EasyUI 文章标签： easyui combobox 前端 js

本文链接：https://blog.csdn.net/colton_null/article/details/54412959

版权

EasyUI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近项目中正在使用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);
        }
    });

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

});