Question

我有以下自动填充文本框可以正常工作：

 $('#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
             }
         })
     }
 });

我想要的是输出返回到名为txtMaterialDescription的文本框的material_description值。我在这个网站上看了不同的例子，但无法让它工作。因此，当用户从autosuggest列表中选择部件号时，描述字段将填充部件号描述。任何人都可以帮助我，并指出我正确的方向吗？

非常感谢。

JC

Answer 1

您需要捕获focus或select事件：

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
                }
            }));
        }
    });
}

Answer 2

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

   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

jQuery UI自动完成功能将所选项目的描述添加到文本字段

2 个答案: