3

我有以下 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;
    }
});
4

2 回答 2

1

我从未使用本地字符串进行自动完成，但以下工作。

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

这是一个工作演示

于 2013-05-03T19:44:43.657 回答
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 );
        }
    };
于 2013-05-03T19:21:55.270 回答