当Select Editoption发布所选列表项的值（或ID）时，AutoComplete帖子标签 - 我需要id发布答案

【问题标题】：while the select editoption posts the value (or id) of the selected list item, autocomplete posts the label - i need id posted当Select Editoption发布所选列表项的值（或ID）时，AutoComplete帖子标签 - 我需要id发布
【发布时间】：2011-11-10 04:57:51
【问题描述】：

虽然 jqgrid editform 中的自动完成和选择都将所选标签放入单元格中，但 select 会将值 (id) 放入 postdata 数组中，而自动完成会将标签放入 postdata 数组中。

有没有办法让编辑选项的自动完成来发布项目值（id）而不是标签？

这是我在...中使用自动完成的 jqgrid 代码段

$('#tab3-grid').jqGrid({
   colNames:['Workorder', 'wo.CUID',.....],
   colModel:[  
      .
      .
      .  
      {name:'wo.CUID', index:'cu.LastName', width:120, fixed:true, align:'center', sortable:true, editable:true, edittype:'text',
         editoptions:{dataInit:function(el){$(el).autocomplete({ source: 'php/customer-ac-script.php' 
                                                              , minLength: 1

                                                             })
                                          }
                    },
         formoptions:{rowpos: 1, label:'Customer', elmprefix:'* '},
         editrules:{required:true}
      },
      .
      .
      .
$('#tab3-grid').jqGrid('navGrid', '#tab3-pager',
   {view:true, closeOnEscape:true, cloneToTop:true}, // general parameters that apply to all navigation options below.
   {jqModal:true, navkeys:[true,38,40], savekey:[true,13]}, // edit options.
   {jqModal:true, navkeys:[true,38,40], savekey:[true,13], reloadAfterSubmit:false, afterSubmit: addRecordID}, // add options.
   {jqModal:true, afterSubmit: serverMessage}, // del options.
   {jqModal:true}, // search options.
   {jqModal:true, navkeys:[true,38,40]} // view options.
);

php代码段：

// construct autocomplete select.
$i = 0;

while($row = mysql_fetch_assoc($result)) {
   $output[$i][$crudConfig['id']]    = $row['CUID'];
   $output[$i][$crudConfig['value']] = $row['LastName'];
   logMsg(__LINE__,'I','cu.CUID: '.$row['CUID'].', cu.LastName: '.$row['LastName']);

   $i++;
}

// encode to json format and send output back to jqGrid table.
echo json_encode($output);
logMsg(__LINE__,'I','Send json output back to jqGrid table: '.json_encode($output));

会不会像在自动完成选择事件下或者在editform提交之前或者之后的grid下调用一个函数那么简单？

另外，我在 jqgrid 文档中的 datainit 中注意到了这个注释：上面写着...

注意：有些插件需要元素在 DOM 中的位置和因为在将元素插入 DOM 之前引发了此事件您可以使用 setTimeout 函数来完成所需的操作。

是否缺少包含 settimeout 函数会导致问题？

【问题讨论】：

您能否更准确地描述您的问题？例如，哪种格式具有返回“php/customer-ac-script.php”的数据。 jQuery UI Autocomplete 允许您完全控制将在自动完成的上下文菜单中显示的标签和在用户选择项目后将插入到<input> 控件中的值。所以你应该准确定义输入数据的格式并实现select，可能还有_renderItem。
我的意思是附加到 datainit: 的 jquery 自动完成功能确实起作用，但是当提交编辑表单时，postdata 数组包含自动完成显示文本而不是与其关联的 id。我已将 php 代码段添加到原始帖子中，以向您展示 jqgrid 得到了什么。

标签： jqgrid autocomplete jquery-ui-autocomplete

【解决方案1】：

在自动完成请求上提供 JSON 响应的服务器代码具有 id 和 value 属性。另一方面，jQuery UI 自动完成的标准行为是使用label 和value 属性（参见documentation 中的“数据模型”）。 label 属性的值（如果存在）将用于显示在上下文菜单中。用户从上下文菜单中选择项目后，value 属性的值将放置在<input> 字段中。 label 属性的值可以有 HTML 标记，但value 属性的值必须是文本。

所以我认为这个问题纯粹是使用独立于 jqGrid 的 jQuery UI 自动完成的问题。如果我理解正确您的问题，您可以通过修改服务器端代码来解决您的问题。

【讨论】：

是的，我今天从 jqgrid 论坛了解到 jqgrid 不会改变 jquery 自动完成的功能。另外，我查看了您提供的数据模型链接。看起来服务器端代码正在构建和发送正确的 json 字符串。所以我想我现在的问题是......在提交编辑表单时，是什么将标签值插入到 postdata 数组中？是自动完成还是编辑表单？
@NelsonM：在您当前的代码中，服务器生成'id' 和'value' 属性，而不是'value' 和'label'。因为 jQuery UI 自动完成没有找到 label 属性，所以它使用 value 作为 label。 id 属性将被忽略。您应该将$row['CUID'] 发布为value 属性和$row['LastName'] 作为label 属性。
我很抱歉......当我研究自动完成页面jqueryui.com/demos/autocomplete/#remote时我很困惑。我注意到名称/值对的值可以通过使用 ui.item.id
我也会更好地利用您链接到的 jquery UI wiki。
@NelsonM：对不起，我不确定你是否解决了这个问题。解决了吗？

【解决方案2】：

Oleg 的回答澄清了 jquery UI 的自动完成的数据模型，让我能够继续前进并理解自动完成与构建 postdata 数组并将其发送到服务器无关，jqgrid 的编辑表单会处理它。有了这些知识，我就能够回答我原来的问题并成功地将自动完成功能集成到 jqgrid 中。因此，为了分享，我想向您展示我的所有动机和解决方案。

默认情况下，从自动完成列表中选择一个标签会将所选标签/值对的值放入文本框中。当您提交时，所有编辑表单都关心的是编辑字段中的内容。因此，当您提交编辑表单时，单元格的 postdata 元素值将再次包含自动完成文本框的值。但是，如果在发布标签/值对的值时，您希望标签/值对的标签显示在文本框中怎么办？你有问题！如何获取发布到服务器的标签/值对的值？

好吧，在花了几天时间之后，事实证明它很简单。虽然我确信有不止一种解决方案，但这是我的：

在网格中添加隐藏的id列
在自动完成函数中定义 select: 和 focus: 事件
在 select: 函数中；将选中的标签插入文本框（可选），禁用自动完成的默认行为，然后将隐藏列的单元格设置为选中的标签/值对的值
焦点：函数；将选中的标签插入文本框（可选），禁用自动完成的默认行为
向导航网格编辑选项添加“onclickSubmit:”事件，函数名称类似于“fixpostdata”
在“fixpostdata”函数中；获取隐藏列的单元格值并将其插入到与该单元格关联的 postdata 元素中。

以下是我使用的grid和javascript代码段……

grid segments

{name:'wo_CUID', index:'wo_CUID', width: 70, hidden: true},
{name:'wo.CUID', index:'cu.LastName', width:120, sortable:true, editable:true,  edittype:'text',
   editoptions:{
      dataInit:function(el){ // el contains the id of the edit form input text box.
         $(el).autocomplete({

             source: 'php/customer-ac-script.php',
             minLength: 1,

             select: function(event, ui){event.preventDefault();
                  $(el).val(ui.item.label);
                  var rowid = $('#tab3-grid').getGridParam('selrow');

                   // set the hidden wo_CUID cell with selected value of the selected label.
                   $('#tab3-grid').jqGrid('setCell', rowid,'wo_CUID',ui.item.value);},

            focus: function(event, ui) {event.preventDefault();
                  $(el).val(ui.item.label);}
                                     })
                              }
                     },
   formoptions:{rowpos: 1, label:'Customer', elmprefix:'* '},
   editrules:{required:true}

},

.

.

$('#tab3-grid').jqGrid('navGrid', '#tab3-pager',
   {view:true, closeOnEscape:true, cloneToTop:true},
   {jqModal:true, navkeys:[false,38,40], onclickSubmit: fixpostdata}, // edit options.

.

.

javascript function

// define handler function for 'onclickSubmit' event.
var fixpostdata = function(params, postdata){
   var rowid = $('#tab3-grid').getGridParam('selrow');
   var value = $('#tab3-grid').jqGrid('getCell', rowid,'wo_CUID');

   postdata['wo.CUID'] = value;

   return;
}

fixpostdata 函数在您提交编辑表单但在 postdata 数组发送到服务器之前触发。此时，您将单元格的 postdata 元素值替换为您想要的任何内容。在这种情况下，标签/值对的值存储在隐藏列单元格中。当函数返回时，将修改后的 postdata 数组发送到服务器。

完成！

【讨论】：