c# - 尝试使用 jQuery 和 Web API 通过自动完成将类的属性之一绑定(bind)到文本框

Question

问题:尝试通过自动完成将类的属性之一绑定(bind)到文本框。

我有一个 Web API 方法，它返回员工列表作为输出。 Employee 是一个包含姓名、年龄、地址、出生日期等属性的类。

当有人在名称文本框中输入几个字符时，我想自动完成/自动建议。

例如:

姓名:麦克斯韦

如果有人输入“Ma”，我想自动建议名字

马特 马修 麦克斯韦

并允许用户选择一个。

我使用的代码是:

GetNameInformation - 返回员工列表。

$("#autocomplete-1")
            .autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: '/GetNameInformation?user=ma',
                        contentType: 'application/json',
                        dataType: 'json',
                        type: 'GET',
                        success: function(json) {
                            return {
                                Name: json.Name

                            }
                        },
                        error: function() {
                            // error handling
                        }
                    }); // ajax
                } // source
            });

我还在我的 html 上引用了这两个:

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

我的 html 页面有

<label for="autocomplete-1">Name: </label>
<input id="autocomplete-1">

此外，我在弹出窗口中看不到数据:

Answer 1

将您的代码更改为:

$( "#autocomplete-1" ).autocomplete({
      source: "https://api.myjson.com/bins/1bf4z5",
      minLength: 2,
      select: function( event, ui ) {
        alert( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    });

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

<label for="autocomplete-1">Name: </label>
<input id="autocomplete-1">

注意为 ajax 发送的 url。该 URL 的响应应该是一个 json 对象数组，如下所示:

[{"id":"Branta canadensis","label":"Greater Canada Goose","value":"Greater Canada Goose"},{"id":"Branta hutchinsii","label":"Lesser Canada Goose","value":"Lesser Canada Goose"}]

PS。由于url是跨域的，所以不起作用。我将 url 粘贴到此处，以便您了解 ajax 的请求:https://jqueryui.com/resources/demos/autocomplete/search.php?term=canad 其中 canad 是在自动完成中输入的文本。