如何使用 Jquery Autocomplete 填写表单值

Posted 2023-05-08

【中文标题】如何使用 Jquery Autocomplete 填写表单值

【英文标题】：How do I use Jquery Autocomplete to ffill out form values

【发布时间】：2021-08-15 05:22:57

【问题描述】：

我有 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 时屏幕的样子...按我想要的方式工作：

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

【参考方案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 并检索我想在文本框中填写的数据集。