js网格和自动完成

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

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