The examples file now includes both form- and inline-editing examples.

In order to use autocomplete plugin with inline editing you just need to modify this part:
.result(function(e, item) {
           $("#"+ variable_holding_row_id +"_my_customId").val(item.res_id );
 });
Apparently jqgrid is building the name and id of the input tag in different manner. The difference is that in inline editing you have to add the rowId of the currently edited row. That's all.

Have a great day.

If you have another look at post #2 you'll see the following code:
     {
        name:'my_customId', index:'my_customId',
        editable:true, hidden:true, search:false
      }
This is a hidden column of the grid. But besause it is editable, when the add/edit dialog is generated, there will be an input element with id and name my_customId . So it isn't a div or span - a simple input
How do we update its value on selection? With this line:
$("#my_customId").val(item.res_id);

I can't tell what is wrong with your code. My cristal ball is broken ... couple of months already
But I have another idea. I've made an example and you are free to download it from here. I've tried to keep it simple - no DB or any fancy stuff in it. I hope you'll find it useful and it will give you a better understanding of where is the troublemaker.

Happy coding! And don't hesitate to ask for more help.

thanks for answering so fast (even after such a long time after your initial post 🙂 ).

Regarding the item.res_id: that was actually no problem, as it is logic to me after implementation.

The main problem which I face is that I don't get any value posted from the form for the variable "my_customId".

I actually don't understand how to update the my_customId from within the colModel when choosing the my_customName.

It seems you have another div or span within your html code with the ID "my_customID" but how would you use it in the form?

My scenario currently: Usual grid and the colModel with the entries my_customName and my_customId.

Autocomplete works fine.

But when submitting only the post variable my_customName is set with the correct name / value of the element (that's perfect) but the variable my_customId is empty.

I do understand that it is the last "return" statement posted in my initial post which should set the my_customId but maybe I missed something else ?

Many thanks

Antonia

You are right. It is my mistake in post #2.
The correct line is:

.result(function(e, item) {
           $("#my_customId").val(item.res_id );
 });

Sorry about that.

Btw the Autocomplete plugin is already part of jQuery UI. You can find some more information at jqueryui.com/demos/autocomplete

If you need further help you can send some source to my email <use_my_nickname@gmail.com>

many thanks for your work.

It works nicely but on one part I have a problem. The my_customId is not posted to the server.

It is this code:

.result(function(e, item) {
           $("#my_customId").val(item.res_name );
 });

First of all I think this should be "item.res_id". But still the variable is not set correctly.

Then it seems to me as if it would be a id-element. But since we are in the context of the colModel I am not sure how to address it correctly.

Do you have any hint so that the ID gets posted correctly? my_customName works as it should.

Thanks again

Antonia

Have a look at this line:

return $.map(data, function (item) {...});

At this point data is just a STRING containing JSON object... so for us to be able to use the object - we need to convert the string using eval() function.

So I think the solution for your trouble is to modify the line like:

return $.map(eval(data), function (item) {...});

Please post a reply if this fixes the issue.

I am having the same problem. Looked at almost all the samples but none work for me.

M using ASP.NET MVC. Grid populates the data. Form editing is working fine. On submit it posts the data to corresponding controller.

But in Autocomplete controller method is not invoked. Tried everything pl help.

Below is my code :

$("#RegionAndCity").jqGrid({
            url: '/BriefAllocation/GetRegionAndCities/?briefId=' + briefallocationid,
            datatype: 'json',
            mtype: 'GET',
            prmNames: {
                briefId: briefallocationid
            },
            colNames: ['AllocatedRegionAndCitiesId', 'BriefAllocationId', 'LocationId', 'LocationName', 'PlannerId', 'Region', 'Budget'],
            colModel: [
                                  { name: 'AllocatedRegionAndCitiesId', index: 'AllocatedRegionAndCitiesId', width: 100, align: 'left', /* key: true,*/editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                                  { name: 'BriefAllocationId', index: 'BriefAllocationId', width: 150, align: 'left', editable: false, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                                  { name: 'LocationId', index: 'LocationId', width: 150, align: 'left', editable: false, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                                  { name: 'LocationName', index: 'LocationName', width: 300, align: 'left', editable: true, edittype: 'text',
                                      editoptions: { dataInit: function (elem) {
                                          setTimeout(function () {
                                              $(elem).autocomplete('<%= Url.Action("FindLocation" , "Shared" ) %>', {
                                                  dataType: "ajax",
                                                  multiple: false,
                                                  formatItem: function (item, index, total, query) {
                                                      return item.value;
                                                  },                                                 
                                                  parse: function (data) {
                                                      return $.map(data, function (item) {
                                                          return {
                                                              data: item,
                                                              value: item.Key,
                                                              result: item.value
                                                          }
                                                      });
                                                  }
                                              }).result(function (event, row) {
                                                  $("#LocationId").val(row.Key);
                                              });                                                
                                          }, 100);
                                      }
                                      }, editrules: { required: true }
                                  }
                                 ,
                                  { name: 'PlannerId', index: 'PlannerId', width: 150, align: 'left', editable: true, edittype: 'text', editrules: { required: false} },
                                  { name: 'Region', index: 'Region', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                                  { name: 'Budget', index: 'Budget', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                                ],
           beforeEditCell:function(rowid,cellname,value,irow,icol){
                                alert("Before Edit!");
                        },
            pager: $('#listPager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'AllocatedRegionAndCitiesId',
            sortorder: "asc",
            viewrecords: true,
            imgpath: '/scripts/themes/steel/images',
            caption: '<b>Regions And Cities</b>',
            ondblClickRow: function (rowid, iRow, iCol, e) {
                $("#RegionAndCity").editGridRow(rowid, prmGridDialog);
            }
        }).navGrid('#listPager', { edit: true, add: true, del: true, refresh: true },
                updateDialog,
                updateDialog,
                updateDialog);

M trying to populate locationName.

On server side i have

        public ActionResult FindLocation(string q, int limit)
        {
            string q="";
           ///Get json data. This method works for autocomplete outside grid.
            return Content(json);
        }

Pl help.

It's quite easy job. You probably already have found the solution for this problem but it may be usefull to someone else too.
First of all you'll need an autocomplete jQuery plugin. I would recomend  Autocomplete – jQuery plugin (current version 1.0.2)   by Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, Jörn Zaefferer. You can find it here
 
This is a simplified example of setting autocomplete to a two fields:

• one of them holding the ID (value) of what we need (hidden one)
• the other (visible in the edit dialog) – holding the value (label, text, you name it)

You can think of this model as a select but we need couple of columns to hold both value and visible text

1. Make sure you included the autocomplete plugin files in the header:
   <link href="your_path_to/autocomplete/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
   <script src="your_path_to/autocomplete/jquery.autocomplete.js" type="text/javascript"></script>
2. Integrate autocompleter as follows
   $(”#querieslist”)..jqGrid({
     // … some grid options …
     colModel :[
        { // ... some column definitions ... },
        {
           name:'my_customId', index:'my_customId',
           editable:true, hidden:true, search:false
         }, {
           name:'my_customName', index:'my_customName', label: 'My automplete column', width:200,
             editable:true,
             edittype:'text', // edittype's default is 'text' so you don't really need it here.
             editoptions: {
               size:64,
               maxlength:255,
               dataInit:function (elem) { // the moment of magic
               $(elem)
                 .autocomplete( // for more info check the autocomplete plugin docs
                   'path_to_serverside.php?some_get_option=if_we_need_it&another_option=goes_here', {
                     dataType: 'ajax',
                     multiple: false,
                     parse: function(data) { // parsing json input
                         return $.map(eval(data), function(row) {
                         return (typeof(row) == 'object')
                           ? { data: row, value: row.res_id, result: row.res_name } // same in the serverside
                           : { data: row, value: '',      result: ''        };
                       });
                     },
                     formatItem: function(item) {
                       return (typeof(item) == 'object')?item.res_name :'';
                     }
                   }
                 )
                 .result(function(e, item) {
                   $("#my_customId").val(item.res_name );
                 });
             }}, 
             searchoptions:{sopt:['bw','bn','eq','ne','ew','en','cn','nc','in','ni']}
           },
           { // … some column definitions … }

   });

3. Now let's have a look at the serverside script (.php)

   header('Content-Type: application/x-json; charset=utf-8');
   // both vars are generated by autocomplete so you just catch them here
   $q = $_GET['q'];
   $limit = $_GET['limit']
   // don't forget to catch your own variables (if you set some)
   // …

   // I will not bother to explain sql query in details – I'm sure you can figure it out
   // It will look like:
   $mySqlQuery = mysql_query(”SELECT `id`, `value` FROM `sqlTable` WHERE `value` LIKE '%”.mysql_real_escape_string($q).”%' LIMIT “.mysql_real_escape_string($limit));
   $res = array();
   if (mysql_num_rows($mySqlQuery) > 0) {
       while ($row = mysql_fetch_assoc($mySqlQuery)) {
          $res[] = '{res_id:”'.str_replace('”','\\\\”',$t_row['id']).'”,res_name:”'.str_replace('”','\\\\”',$t_row['value']).'”}';
       }
    } else {
        $res[] = '{res_id:”0″,res_name:”Try again”}';
           }
     echo '['.implode(',',$res).']'; exit;

I hope this post will give you a clue HOW to make it. If you have more specific questions – just ask.

thanx

-md-