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

试试这个片段：

$(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>

或此代码笔：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

js网格和自动完成

js grid and autocomplete

node.js

jquery-ui-autocomplete

jsgrid