带有一列自动完成文本字段的 InlineEdit？

Question

我正在寻找在 free-jqgrid 内联编辑模式下支持自动完成类型输入字段的选项。如果将 5-10 个小值放入下拉列表中，效果会很好。我需要搜索值或需要网格上的自动完成选项。

让我知道这是否可行？如果是，请提供一些指导或示例。

更新 1 Screenshot displays inline input text field needs Auto-Complete

更新 2 我有以下文件导入顺序：

jquery-ui-min.css
bootstrap.min.css
bootstrap-grid.min.css
ui.jqgrid.min.css
font-awesome.min.css
select2.min.css

jquery.min.js
jquery-ui.min.js
select2.min.js
jquery.jqgrid.min.js
tether.min.js
bootstrap.min.js

Answer 1

您可以使用

这样的代码

{ name: "name", align: "justify", width: 80, editrules: { required: true },
    autoResizing: { minColWidth: 80 },
    createColumnIndex: true,
    editoptions: {
        dataInit: function (elem) {
            initAutocomplete.call(this, elem, "name");
        }
    }, 
    searchoptions: {
        dataInit: function (elem) {
            initAutocomplete.call(this, elem, "name");
        },
        sopt: [ "cn", "eq", "bw", "ew", "bn", "nc", "en" ],
        clearSearch: true
    } }

其中 initAutocomplete 函数声明为

var initAutocomplete = function (elem, cmName) {
        $(elem).autocomplete({
            source: $(this).jqGrid("getUniqueValueFromColumnIndex", cmName),
            delay: 0,
            minLength: 0
        });
    };

见https://jsfiddle.net/OlegKi/ugxvr75q/

带有一列自动完成文本字段的 InlineEdit？

InlineEdit with one column auto-complete text field?

jqgrid

free-jqgrid