如何使用 Jquery Autocomplete 填写表单值

Question

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

这是我的控制器方法：

  public async Task<JsonResult> GetDatasets(string search)
        {
            //Hosted web API REST Service base url  

            string BaseUrl = ConfigurationManager.AppSettings["baseServiceUrl"];
            List<Dataset_Search> dataset = new List<Dataset_Search>();
            List<string> datasets;
            var client = new HttpClient();

            //Passing service base url  
            client.BaseAddress = new Uri(BaseUrl);

            client.DefaultRequestHeaders.Clear();
            //Define request data format  
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

            //Sending request to find web api REST service resource Get All Dataset using HttpClient  
            HttpResponseMessage Res = await client.GetAsync("api/Datasets/GetDataset_Search");

            if (Res.IsSuccessStatusCode)
            {
                //Storing the response details recieved from web api   
                var DatasetResp = await Res.Content.ReadAsStringAsync();

                //Deserializing the response recieved from web api and storing into the Employee list  
                dataset = JsonConvert.DeserializeObject<List<Dataset_Search>>(DatasetResp);
            }


            var datasets2 = dataset.Where(x => x.Name.ToLower().StartsWith(search.ToLower())).Select(y => new { y.Name, y.Provider, y.Institution }).ToList();
            //datasets = dataset.Where(x => x.Name.ToLower().StartsWith(search.ToLower())).Select(y => y.Name ).ToList();
            return Json(datasets2, JsonRequestBehavior.AllowGet);
        }
    }

这里是从服务器返回的原始数据，取自 ajax 中的数据对象：

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

这是执行 .autocomplete 时屏幕的样子...按我想要的方式工作：

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

Answer 1

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

  $("#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 并检索我想在文本框中填写的数据集。