我如何使用Jquery自动完成来填充表单值

我有3个文本框，名称、机构和提供者

我想在名称框中输入最多2个字符，并返回与这两个字符相关的所有数据集信息。返回数据，但我想选择其中一个值并填充其他两个文本框

以下是我的Jquery：

 $("#dataset_name").autocomplete({
                minLength: 2,
                source: function (request, response) {

                    $.ajax({

                        url: key +  "/Search/GetDatasets/",
                        dataType: "html",
                        type: "GET",
                        data: { search: $("#dataset_name").val() },
                        success: function (data) {
                            response($.map(JSON.parse(data), function (item) {
                                 
                                return { label: item, value: item }
                            }))
                        },
                        error: function (xhr, status, error) {
                            alert("error");
                        }
                    });
                }

这是我的用户界面：

<div class="section_header2">Dataset</div>
                        <table>
                            <tr>
                                <td>
                                    <span class="display-label">Data Provider:</span>
                                </td>
                                <td>
                                    @Html.TextBoxFor(model => model.data_provider, new { @class = "input-box" })
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="display-label">Dataset Name*:</span>
                                </td>
                                <td>
                                    @Html.TextBoxFor(model => model.dataset_name, new { @class = "input-box" })
                                </td>
                            </tr>
                             
                            <tr>
                                <td>
                                    <span class="display-label">Institution:</span>
                                </td>
                                <td>
                                    @Html.TextBoxFor(model => model.institution, new { @class = "input-box" })
                                </td>
                            </tr>
                        </table>
            });

下面是执行.autocomplete时屏幕的外观。。。按照我希望的方式工作：

---

我要做的是在我做出选择后填写姓名、机构和提供者。

我知道了这是如何工作的，我让自动完成部分工作，但我没有设置选择功能，这就是这项工作的原因：

  $("#dataset_name").autocomplete({
                minLength: 2,
                source: function (request, response) {

                    $.ajax({

                        url: key +  "/Search/GetDatasets/",
                        dataType: "html",
                        type: "GET",
                        data: { search: $("#dataset_name").val() },
                        success: function (data) {
                            response($.map(JSON.parse(data), function (item) {
                                
                                return { id: item.Dataset_ID, value: item.Name }
                            }))
                        },
                        error: function (xhr, status, error) {
                            alert("error");
                        }
                      

                    });
                },
                select: function (event, ui) {
                       
                    $.ajax({
                        cache: false,
                        type: "GET",
                        url: key + "/Search/SelectDataset/",
                        data: { id: ui.item.id },
                        success: function (data) {
                            
                            $('#dataset_name').val(data.Name)
                            $("#data_provider").val(data.Provider)
                            $("#institution").val(data.Institution)
                        }
                    });

                }
            });

        });

我需要使用另一个Ajax并检索要填充到文本框中的数据集

response($.map(JSON.parse(data), function (item) 

  $("#dataset_name").autocomplete({
                minLength: 2,
                source: function (request, response) {

                    $.ajax({

                        url: key +  "/Search/GetDatasets/",
                        dataType: "html",
                        type: "GET",
                        data: { search: $("#dataset_name").val() },
                        success: function (data) {
                            response($.map(JSON.parse(data), function (item) {
                                
                                return { id: item.Dataset_ID, value: item.Name }
                            }))
                        },
                        error: function (xhr, status, error) {
                            alert("error");
                        }
                      

                    });
                },
                select: function (event, ui) {
                       
                    $.ajax({
                        cache: false,
                        type: "GET",
                        url: key + "/Search/SelectDataset/",
                        data: { id: ui.item.id },
                        success: function (data) {
                            
                            $('#dataset_name').val(data.Name)
                            $("#data_provider").val(data.Provider)
                            $("#institution").val(data.Institution)
                        }
                    });

                }
            });

        });