带有一列自动完成文本字段的内联编辑？答案

【问题标题】：InlineEdit with one column auto-complete text field?带有一列自动完成文本字段的内联编辑？
【发布时间】：2017-03-08 03:51:57
【问题描述】：

我正在寻找在 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

【问题讨论】：

README 到最新 v4.14.0 版本的免费 jqGrid 包括演示 jsfiddle.net/OlegKi/yvbt6w54/1，它演示了 jQuery UI Autocomplete 和 select2 与免费 jqGrid 的用法。
感谢奥列格提供信息
嗨 Oleg，实际上我希望支持内联输入文本以支持自动完成。我没有搜索字段选项。请参阅带有屏幕截图的更新 1。

标签： jqgrid free-jqgrid

【解决方案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/

【讨论】：

嗨奥列格，有些奇怪，我已经添加了所有必需的文件，但似乎我得到了 Uncaught TypeError: $(...).autocomplete is not a function。您是否发现我导入 CSS 和 JS 文件的顺序有任何问题？见 UPDATE2
@dev.sforce：UPDATE2 不包含有关所用 JvaScript 库版本的任何信息。我向您发布了 JSFiddle 演示，您可以对其进行修改以重现该问题。比如jsfiddle.net/OlegKi/ugxvr75q/2，好像没有问题。
所有版本都是正确的，除了 bootstrap！我正在使用 Boostrap4
@dev.sforce：Bootstrap 4 仍处于非常早期的开发阶段（alpha6）。不过免费的 jqGrid 4.14.0 支持它。我无法重现自动完成的任何问题。我可以看到 select2 与 Bootstrap4 的一些兼容性问题，但简单的 CSS 设置解决了小问题。见jsfiddle.net/OlegKi/ugxvr75q/4
感谢您的信息，我认为销售人员方面可能有一些奇怪的事情，我会更新您。