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

问题描述：

我正在寻找选项以支持free-jqgrid内联编辑模式下的自动完成类型输入字段。如果5-10个值小于下拉菜单，它会很好用。我需要在网格上找到需要搜索的值或者需要自动完成选项。带有一列自动完成文本字段的InlineEdit？

让我知道这是可能的吗？如果是请提供一些方向或示例。

更新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

[自述文件]（https://github.com/free-jqgrid/jqGrid/blob/v4.14.0/README.md）到最新V4 .14.0版本的免费jqGrid包含演示https://jsfiddle.net/OlegKi/yvbt6w54/1/，它演示了jQuery UI Autocomplete和select2与免费jqGrid的用法。 – Oleg

感谢Oleg的信息 –

您好Oleg，其实我期待支持内联输入文本以支持自动完成。我没有搜索字段选项。请参阅UPDATE 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/

嗨奥列格，东西很奇怪，我已经添加了所有必需的文件，但它似乎我越来越未被捕获TypeError：$（...）.autocomplete不是一个函数。你看到我导入CSS和JS文件的顺序有问题吗？请参阅UPDATE2 –

@ dev.sforce：UPDATE2不包含有关使用的JvaScript库版本的任何信息。我发布了你的JSFiddle演示，你可以修改它来重现问题。例如，https://jsfiddle.net/OlegKi/ugxvr75q/2/似乎没有问题。 – Oleg

所有版本都是正确的除了bootstrap！我正在使用Boostrap4 –

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

相关推荐