js grid and autocomplete

Question

I am able to create a custom field with jsGrid and jquery autocomplete. All ajax CRUD calls are working for all other fields. The below code activates autocomplete and shows the available options in the input field as expected.

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)

So far so good. However to actually capture the value so it can be inserted into the db, I also need to define insertValue and editValue. The code below is NOT working

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

this one is not working eiter:

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

reference: jsGrid. http://js-grid.com/demos/

autocomplete: https://jqueryui.com/autocomplete/

Answer 1

Try this snippet:

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

or this codepen: https://codepen.io/beaver71/pen/rpaLEo