jquery-ui 自动完成：在下拉列表中显示对 ID-Name 的列表，但 ID 隐藏

Posted 2023-05-08

【中文标题】jquery-ui 自动完成：在下拉列表中显示对 ID-Name 的列表，但 ID 隐藏

【英文标题】：jquery-ui autocomplete: show a list of pair ID-Name in the dropdown list but with ID hidden

【发布时间】：2021-09-27 08:52:35

【问题描述】：

我有一个 asp.net 应用程序，它由一个母版页和一个带有母版页的 Web 表单组成。

Web 表单包含一个标签和一个文本框：

Enter department name: <input type="text" value="" id="lstDepartments" />

我已经使用 jquery-ui 实​​现了 jQuery 自动完成功能。当用户开始在文本框中输入时，我使用 jquery ajax 调用 web api 方法，该方法搜索包含输入的子字符串的部门名称，最后它返回一个 JSON，其结果具有以下结构：

[
   
      DeptID: "83838383",
      Name: "DepartmentName_1"
   ,
   
      DeptID: "63343434",
      Name: "DepartmentName_2"
   ,
   
      DeptID: "3444555",
      Name: "DepartmentName_3"
   
]

jQuery Ajax 调用是：

    function ConfigureAutocomplete() 
        $("#lstDepartments").autocomplete(
            source: function (request, response)                         
                $.ajax(
                    url: "https://www.mycompany.es/MyWebapis/Departments/search/" + request.term,
                    dataType: "json",
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data)  return data; ,
                    success: function (data) 
                        response($.map(data.d, function (item) 
                            return  value: item
                        ))
                    ,
                    error: function (XMLHttpRequest, textStatus, errorThrown) 
                        alert(textStatus);
                    
                );
            ,
            minLength: 1 // minimum 1 character to start searching
        );
    

对 web api 方法的调用正常，它返回一个具有上述结构的 JSON。

我现在尝试做的没有成功的事情如下：

现在我试图在文本框中显示 JSON 中包含的那些 DeptID-Name 对，但我想在文本框中隐藏 DeptID，我的意思是，我只想显示名称。因此，例如，如果我在下面的文本框中键入“部门”，则应将其显示为下拉列表：

DepartmentName_1
DepartmentName_2 
DepartmentName_3

然后，一旦用户从该下拉列表中选择其中一个，我需要使用另一个 jquery ajax 调用来调用另一个 web api。当用户选择下拉列表中的一项时，我想获取其对应的 ID 并将其作为参数传递给 web api 方法，以便使用其 ID 获取该部门的详细信息。

我该怎么做？

【参考方案1】：

查看 jquery ui 自动完成的文档。您可以使用所选项目的事件：https://api.jqueryui.com/autocomplete/#event-select。 “ui”参数包含所选选项的值，您可以使用该值将其传递给 ajax 调用。