如何实现带自动补全的jsGrid select字段，显示label返回value

核心目标是改造默认select字段为自动补全样式，前端显示标签文本(label)，提交给后端时传递对应标识值(value)，适配对象数组类型的自定义数据源。

前置依赖 #

提前引入jQuery、jsGrid、jQuery UI（含autocomplete组件及对应样式）即可。

实现步骤 #

1. 自定义自动补全字段类型 #

重写jsGrid字段的模板生成、取值、单元格渲染逻辑，实现label显示、value提交的效果：

// 自定义数据源
var tags = [
  {label:"tag1", value:"201"}, 
  {label:"tag2", value:"202"}, 
  {label:"tag3", value:"203"}
];

// 注册自定义字段类型
jsGrid.fields.autocompleteSelect = jsGrid.Field.extend({
  // 新增表单模板
  insertTemplate: function() {
    return this._createAutocompleteInput();
  },
  // 编辑表单模板
  editTemplate: function(value) {
    // 编辑状态回显label
    var selectedItem = tags.find(item => item.value === value) || {};
    var $input = this._createAutocompleteInput();
    $input.val(selectedItem.label || '').data('selectedValue', value);
    return $input;
  },
  // 新增表单取值逻辑（返回value用于提交）
  insertValue: function($input) {
    return $input.data('selectedValue') || '';
  },
  // 编辑表单取值逻辑（返回value用于提交）
  editValue: function($input) {
    return $input.data('selectedValue') || '';
  },
  // 单元格渲染逻辑（展示label而非value）
  cellRenderer: function(value) {
    var selectedItem = tags.find(item => item.value === value);
    return selectedItem ? selectedItem.label : value;
  },
  // 内部方法：生成带自动补全能力的输入框
  _createAutocompleteInput: function() {
    var $input = $('<input>').autocomplete({
      source: tags,
      minLength: 0,
      select: (e, ui) => {
        $input.val(ui.item.label);
        $input.data('selectedValue', ui.item.value);
        return false;
      },
      focus: (e, ui) => {
        $input.val(ui.item.label);
        return false;
      }
    });
    // 点击输入框直接展示所有可选选项
    $input.on('click', function() {
      $(this).autocomplete('search', '');
    });
    return $input;
  }
});

2. jsGrid字段配置 #

在jsGrid的fields配置中直接调用自定义的字段类型即可：

$("#jsGrid").jsGrid({
  // 其他基础配置：宽度、高度、分页、数据源等...
  fields: [
    // 其他字段配置...
    { 
      name: "tagId", 
      title: "标签", 
      type: "autocompleteSelect", // 引用自定义字段类型
      width: 150, 
      align: "center" 
    },
    { type: "control", editButton: true, deleteButton: true }
  ]
});

效果说明 #

• 表格单元格展示标签的label文本，用户可读性更高
• 新增/编辑时输入框支持自动补全匹配，输入时优先匹配label内容
• 提交数据时，对应字段会返回标签的value值，可直接传给后端存入数据库

可选扩展 #

• 如果数据源是动态从接口获取的，可以将tags变量改为动态请求的结果，在_createAutocompleteInput方法中加载即可
• 如果需要支持筛选功能，可新增重写filterTemplate和filterValue方法，逻辑和编辑/插入模板保持一致即可

内容的提问来源于stack exchange，提问作者Nibbik