Question

我是自动完成新手。我能够从API调用中获取数据并将其设置为源，并在基本级别上进行自动完成工作。但是当我选择一个值时，我也希望能够：

在文本输入值中显示标签，同时使文本输入值为源的值。
自动填写其他一些输入。

例如，我有3个输入框，其中包含以下ID：customer，customer_number，customer_representative。我有一个API，它返回以下json格式的数据：

{"request":
   {"request_type":"whatever",
   "response":[
   {
      "customer_id":"123456",
      "customer_name":"TEST CUSTOMER",
      "customer_account":"ABC987",
      "customer_rep_id":"567",
       "customer_rep_id":"John Smith",
   }
   ]

   }
}

到目前为止，这是我的代码：

var url = [API URL W/ PARAMS];
$.getJSON(url, function(data) 
{       
    var src = [];
    $.each(data.response, function(index, value) {
        var customer= data.response[index]['customer_name'];
        src.push(customer);
    });     

    $( "#customer" ).autocomplete({
        source: src
    });
}

这将为客户输入框启用自动完成功能，但该值与客户名称相同。阅读完官方文档（http://api.jqueryui.com/autocomplete/）后，似乎我应该能够使用select（event，ui）来至少填充其他2个输入框，但我是不知所措。

非常感谢任何帮助。

Answer 1

在玩了一会儿之后，它终于点击了我的大脑。为了实现这两个目标，我只是使源成为一个多维数组，其中包含我想要检索的额外值，然后添加了一个回调函数来填充我想要填写的任何其他字段。

    var src = [];
     $.each(data.response, function(index, value) {
    var customer= data.response[index]['customer_name'];

     //Also retrieve other values that I want to use
     var customer_id= data.response[index]['customer_id'];
     var customer_rep_id= data.response[index]['customer_rep_id'];
     var customer_rep_name= data.response[index]['customer_rep_name'];

    //Make this a multi array
    src.push({label: customer, value:customer_id, rep_id = customer_rep_id, rep = customer_rep_name });
});   

//Added a callback function
$( "#customer" ).autocomplete({
    source: src,
    select: AutoCompleteSelectHandler
});


//This function auto-populates other inputs
function AutoCompleteSelectHandler(event, ui) { 
    //Populate rep box
    $("#customer_representative").val(ui.item.customer_rep_name);
 }

Answer 2

结帐轻量级DevBridge jQuery自动填充：https://github.com/devbridge/jQuery-Autocomplete

您可以使用您的建议和设置传递任何数据onSelect回调来相应地处理值。

JQuery自动完成 - 从源中选择多个值

2 个答案: