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”重新命名为“label”

$( "#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

jQuery UI自动完成JSON数组

2 个答案: