js网格和自动完成

Question

我可以使用 jsGrid 和 jquery 自动完成功能创建自定义字段。所有 ajax CRUD 调用都适用于所有其他字段。下面的代码会激活自动完成功能并按预期在输入字段中显示可用选项。

var tags = ["tag1", "tag2", "tag3"];

MyDescriptionField.prototype = new jsGrid.Field({

insertTemplate: function(value) {
 return this._editPicker = $("<input>").autocomplete({source : tags});
 },
editTemplate: function(value) {
 return this._editPicker = $("<input>").autocomplete({source : tags});
},
 ........... (more code)

到目前为止一切顺利。但是，要实际捕获值以便将其插入到数据库中，我还需要定义 insertValue 和 editValue。 下面的代码不起作用

insertValue: function(){
        return this._insertPicker = $("<input>").val();
},
...........(more code)

这个也不行：

insertValue: function(){
        return this._insertPicker.autocomplete({
            select: function(event, ui) {
                $("<input>").val(ui.item.value);
            }
        });
    },

参考：jsGrid。 http://js-grid.com/demos/

自动完成：https://jqueryui.com/autocomplete/

Answer 1

试试这个 sn-p：

$(function() { 
  var myTagField = function(config) {
    jsGrid.Field.call(this, config);
  };
  myTagField.prototype = new jsGrid.Field({
    sorter: function(tag1, tag2) {
      return tag1.localeCompare(tag2);
    },
    itemTemplate: function(value) {
      return value;
    },
    insertTemplate: function(value) {
      return this._insertAuto = $("<input>").autocomplete({source : tags});
    },
    editTemplate: function(value) {
      return this._editAuto = $("<input>").autocomplete({source : tags}).val(value);
    },
    insertValue: function() {
      return this._insertAuto.val();
    },
    editValue: function() {
      return this._editAuto.val();
    }
  });
  jsGrid.fields.myTagField = myTagField;
  $("#jsGrid").jsGrid({
    width: "100%",
    inserting: true,
    editing: true,
    sorting: true,
    paging: true,
    fields: [
      { name: "Name", type: "text" },
      { name: "Tag", type: "myTagField", width: 100, align: "center" },
      { type: "control", editButton: false, modeSwitchButton: false }
    ],
    data: db.users
  });
});

var tags = ["tag1", "tag2", "tag3"];

var db = {};
db.users = [
  {
    "Name": "Carson Kelley",
    "Tag": ""
  },
  {
    "Name": "Prescott Griffin",
    "Tag": "tag1"
  },
  {
    "Name": "Amir Saunders",
    "Tag": "tag3"
  },
  {
    "Name": "Derek Thornton",
    "Tag": "tag2"
  },
  {
    "Name": "Fletcher Romero",
    "Tag": ""
  }];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//rawgit.com/tabalinas/jsgrid/master/dist/jsgrid.min.js"></script>
<link href="//code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<link href="//rawgit.com/tabalinas/jsgrid/master/dist/jsgrid.min.css" rel="stylesheet"/>
<link href="//rawgit.com/tabalinas/jsgrid/master/dist/jsgrid-theme.css" rel="stylesheet"/>
<div id="jsGrid"></div>

或者这个codepen：https://codepen.io/beaver71/pen/rpaLEo

Answer 2

感谢@beaver。你的笔帮助我更好地理解了自定义字段。我对其进行了扩展，以添加带有自动完成功能的过滤。 https://codepen.io/obrienje/pen/aQKNry

$(function() {
  var myTagField = function(config) {
    jsGrid.Field.call(this, config);
  };
  myTagField.prototype = new jsGrid.Field({
    autosearch: true,
    sorter: function(tag1, tag2) {
      return tag1.localeCompare(tag2);
    },
    itemTemplate: function(value) {
      return '<span class="label label-primary">' + value + '</span>';
    },
    insertTemplate: function(value) {
      return this._insertAuto = $("<input>").autocomplete({
        source: tags
      });
    },
    filterTemplate: function(value) {
      if (!this.filtering)
        return "";

      var grid = this._grid,
        $result = this._filterAuto = $("<input>").autocomplete({
          source: tags
        });

      if (this.autosearch) {
        $result.on("change", function(e) {
          grid.search();
        });
      }

      return $result;
    },

    editTemplate: function(value) {
      return this._editAuto = $("<input>").autocomplete({
        source: tags
      }).val(value);
    },
    insertValue: function() {
      return this._insertAuto.val();
    },
    filterValue: function() {
      return this._filterAuto.val();
    },
    editValue: function() {
      return this._editAuto.val();
    }
  });
  jsGrid.fields.myTagField = myTagField;
  $("#jsGrid").jsGrid({
    width: "100%",
    filtering: true,
    inserting: true,
    editing: true,
    sorting: true,
    paging: true,
    fields: [{
        name: "Name",
        type: "text"
      },
      {
        name: "Tag",
        type: "myTagField",
        width: 100,
        align: "center"
      },
      {
        type: "control",
        editButton: false,
        modeSwitchButton: false
      }
    ],
    data: db.users,

    controller: {
      loadData: function(filter) {
        return $.grep(db.users, function(item) {
          return (!filter.Tag || item.Tag.toLowerCase().indexOf(filter.Tag.toLowerCase()) > -1);
        });
      }
    }

  });
});

var tags = ["tag1", "tag2", "tag3"];

var db = {};

db.users = [{
    "Name": "Carson Kelley",
    "Tag": ""
  },
  {
    "Name": "Prescott Griffin",
    "Tag": "tag1"
  },
  {
    "Name": "Amir Saunders",
    "Tag": "tag3"
  },
  {
    "Name": "Derek Thornton",
    "Tag": "tag2"
  },
  {
    "Name": "Fletcher Romero",
    "Tag": ""
  }
];

<html>
<head>
<link href="https://rawgit.com/tabalinas/jsgrid/master/dist/jsgrid.min.css" rel="stylesheet"/>  
<link href="https://rawgit.com/tabalinas/jsgrid/master/dist/jsgrid-theme.css" rel="stylesheet"/>
<link href="//code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>

<body>
  <h1>Custom Grid DateField filtering with autocomplete</h1>
  <div id="jsGrid"></div>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script src="https://rawgit.com/tabalinas/jsgrid/master/dist/jsgrid.min.js"></script>
</body>

</html>

感谢@beaver。你的笔帮助我更好地理解了自定义字段。我对其进行了扩展，以添加带有自动完成功能的过滤。 https://codepen.io/obrienje/pen/aQKNry