0

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

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

例如，我有 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 个输入框，但我不知如何。

任何帮助是极大的赞赏。

4

2 回答 2

0

Checkout 轻量级 DevBridge jQuery 自动完成功能：https ://github.com/devbridge/jQuery-Autocomplete

您可以通过您的建议传递任何数据并设置 onSelect 回调以相应地处理值。

于 2013-01-08T00:09:52.743 回答
0

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

    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);
 }
于 2013-01-07T23:47:19.540 回答