editorKeyPress - get current textfield value

[mikep]

How to I get the current value from the grid cell using editorKeyPress?
I need to get the cell value, then make an ajax call with this value to return an array that will be used to populate the autoCompleteEditor.

editorKeyPress: function(evt, ui) {
   if (ui.dataIndx === 'my column name') {
 
       //how to I get the value in the text field?

  }

[paramvir]

You can get the editor value in editorKeyUp event.

Code: [Select]

editorKeyUp: function(evt, ui){
  var val = evt.originalEvent.target.value;
}

However you don't need to listen to event to implement autocomplete editor as autocomplete editor takes care of reading editor value and ajax call.

Example: Ship Country column in https://paramquery.com/pro/demos/editing_custom

[mikep]

thank you.

I saw that example but I need to make an ajax call on every keypress to build the editor array, since the array will change on every keypress.
I'm able to do that, but am not able to rebind the array to the editor.  see my ?? below.



                editorKeyPress: function (evt, ui) {
                    if (ui.dataIndx === 'mgr') {
                        mgrSearch = evt.originalEvent.target.value;
                        charC = (evt.charCode || evt.keyCode),
                        chr = String.fromCharCode(charC);
                        mgrSearch += chr
                        MgrSearch(mgrSearch);
                    }
                }


function MgrSearch(mgrSearch) {

            var data = { 'searchVal': mgrSearch }

            $.ajax({
                type: "POST",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                url: "Services.aspx/SearchManager",
                success: function (data) {
                         Manager = data.d.split(",")

                         //? how can I bind the Manager array at this point?
                         autoCompleteEditor(Manager) //this does not work
          }
}


function autoCompleteEditor(source) {
            return function (ui) {
                ui.$cell.addClass('ui-front');//so that dropdown remains with input.

                //initialize the editor
                ui.$editor.autocomplete({
                    //appendTo: ui.$cell, //for grid in maximized state.
                    source: source,
                    position: {
                        collision: 'flipfit',
                        within: ui.$editor.closest(".pq-grid")
                    },
                    selectItem: { on: true }, //custom option
                    highlightText: { on: true }, //custom option
                    minLength: 0
                }).focus(function () {
                    //open the autocomplete upon focus
                    $(this).autocomplete("search", "");
                });
            }
        }

[paramvir]

if you mean to update options of autocomplete from Manager array.

Code: [Select]

$editor.autocomplete('source', Manager);

Reference: https://api.jqueryui.com/autocomplete/#option-source

[mikep]

thank you. Yes that is what I need to do. How would I reference the $editor in the function?

function MgrSearch(mgrSearch) {

            var data = { 'searchVal': mgrSearch }

            $.ajax({
                type: "POST",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                url: "Services.aspx/SearchManager",
                success: function (data) {
                         Manager = data.d.split(",")

                         $editor.autocomplete('source', Manager);
          }
}

[paramvir]

editor element is evt.originalEvent.target in the event, so it can be wrapped in $() to get $editor.

Code: [Select]

var $editor = $( evt.originalEvent.target )