0

对于自动完成文本框，我有以下内容，它可以正常工作：

 $('#material_number').autocomplete({
     source: function(request, response) {
         $.ajax({
             url: "index.cfm?action=leadtime.getmaterialleadtime&returnformat=json",
             dataType: "json",
             data: {
                 search: request.term,
                 maxRows: 10
             },
             success: function(data) {
                 response(data);
                 console.log();
                 //need to append material_description to a textbox here
             }
         })
     }
 });

我想要输出的 material_description 值返回到一个名为 txtMaterialDescription 的文本框。我查看了此站点上的不同示例，但无法使其正常工作。因此，当用户从自动建议列表中选择零件号时，描述字段会填充零件号说明。任何人都可以帮助我并指出我正确的方向吗？

非常感谢一如既往。

JC

4

2 回答 2

3

您需要捕获focusorselect事件：

focus: function(event, ui) {
    $("#textbox").val(ui.item.someProperty);
}

现在，如果您的 JSON 数据由看起来像的对象组成，{label: ..., value: ..., someProperty: ...}那么您可以编写：

source: function(request, response) {
    $.ajax({
        url: "index.cfm?action=leadtime.getmaterialleadtime&returnformat=json",
        dataType: "json",
        data: {
            search: request.term,
            maxRows: 10
        },
        success: response
    });
}

否则，您始终可以使用以下方式转换数据jQuery.map：

source: function(request, response) {
    $.ajax({
        url: "index.cfm?action=leadtime.getmaterialleadtime&returnformat=json",
        dataType: "json",
        data: {
            search: request.term,
            maxRows: 10
        },
        success: function(data) {
            response($.map(data, function(item) {
                return {
                    label: item.productName,
                    value: item.productCode,
                    someProperty: item.productDescription + item.productPrice
                }
            }));
        }
    });
}
于 2012-10-30T16:21:24.537 回答
0

您可以使用焦点选项并为重点项目加载详细信息，例如

   focus: function(event, ui) {
            $(this).val(ui.item.label);

 //do ajax call here  for currently focused element 
  // and on sucesss you can do the following

  //add your detail description here
            $("#tags").empty();
            $("#tags").append("Detailed for "+ui.item.label);

            return false;
        },

有关详细说明，您可以查看此处 - jquery autocomplete example

于 2012-10-30T15:29:53.897 回答