jQuery用户界面自动完成JSON阵列

Question

我有以下JSON数组：

partTags = [{"part":"Part1","dwg":"A"},{"part":"Part2","dwg":"B"}] 

这基本上携带零件编号和对应的绘图数字/字母

到添加第二参数（“图号”此前）我只有部件号，我使用jQuery自动完成来搜索数组。我现在想要做的是在我的第一个输入中搜索部件号：<input type="text" id="part_number">，并在单击部件号后自动将其相应的图号添加到第二个输入：<input type="text" id="drawing_number">。

这是我有：

$("#part_number").autocomplete({ 
    delay: 100, 
    source: partTags 
}); 

如何修改上面的代码来实现这一目标？我对jQuery没有太多的工作，所以在涉及到一些API时我很失落。

这里是我摆弄了一下后，至今...

$("#part_number").autocomplete({ 
    delay: 45, 
    source: partTags, 
    select: function(event, ui) 
    { 
     $(this).val(ui.item.part); 
     $("input#drawing_number").val(ui.item.dwg); 
     return false; 
    } 
}); 

Answer 1

好吧，我想通了看API之后。

partTags = [{"label":"Part1","dwg":"A"},{"label":"Part2","dwg":"B"}] 

我不得不重新命名为“部分”为“标签”

$("#part_number").autocomplete({ 
    delay: 45, 
    source: partTags, 
    select: function(event, ui) 
    { 

     $(this).val(ui.item.label); 
     $(this).closest('tr').find("input[id^='drawing_number']").val(ui.item.dwg); 
     return false; // find the drawing number input on that row 
    } 
    }).data("autocomplete")._renderItem = function(ul, item){ 
     if(item.dwg!=null || item.dwg!='') // if the drawing is null or empty 
     { 
      return $("<li></li>").data("item.autocomplete", item).append("<a><strong>" + item.label + "</strong> - Rev " + item.dwg + "</a>").appendTo(ul); 
     } 
     else 
     { 
      return $("<li></li>").data("item.autocomplete", item).append("<a><strong>" + item.label + "</strong></a>").appendTo(ul); 
     } 
    }; 

Answer 2

我从来没有使用自动完成本地字符串，但下面的工作。

$("#part_number").autocomplete({ 
minLength: 0, 
source: function (request, response) { 
    $.post("/echo/json/", { 
     json: '[{"part":"Part1","dwg":"A"},{"part":"Part2","dwg":"B"}]', 
     delay: 1 
    }, function (data) { 
     response($.map(data, function (pn) { 
      return { 
       value: pn.dwg, 
       label: pn.part 
      }; 
     })); 
    }); 
}, 
select: function (event, ui) { 
    $('#part_number').val(ui.item.label); 
    $("input#drawing_number").val(ui.item.value); 
    return false; 
} 
}); 

这里是一个工作demo