js grid 및 autocomplete

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) 

지금까지 그렇게 좋았습니다. 그러나 실제로 값을 캡처하여 db에 삽입 할 수 있도록 insertValue 및 editValue를 정의해야합니다. 아래의 코드는 하나 eiter 작동하지

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>

또는이 codepen : https://codepen.io/beaver71/pen/rpaLEo