C# 尝试使用jQuery和Web API通过自动完成将类的一个属性绑定到文本框

问题：试图通过自动完成将类的属性之一绑定到文本框

我有一个WebAPI方法，它将员工列表作为输出返回。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中引用了以下2项：

<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">

名称：

此外，我在弹出窗口上看不到数据：

---

将您的代码更改为：

$（“#自动完成-1”）.autocomplete({
来源：“https://api.myjson.com/bins/1bf4z5",
最小长度：2，
选择：功能（事件、用户界面）{
警报（“选定：”+ui.item.value+“aka”+ui.item.id）；
}
});

姓名：

$（“#自动完成-1”）
.自动完成({
来源：“MyMethodURL”，
最小长度：2，
选择：功能（事件、用户界面）{
$（“#自动完成-1”）.val（ui.item.Name）；
返回false；
}
})
.data（“ui自动完成”）。\u renderItem=功能（ul，项目）{
var internal_html=''+item.Name+''；
返回$（“
”）
.data（“item.autocomplete”，item）
.append（内部\u html）
.附录（ul）；
};
})（jQuery）；
您面临的确切问题是什么？什么都没有发生，名称没有得到自动建议。谢谢，但它不起作用，当我键入“canad”时，它抛出了“找不到结果”。这就是我说的，“因为url是跨域的，所以它不会起作用。”但代码与自动完成时应该的一样。按照我写的那样做修改，你的代码就会工作：）不管怎样，把url更新成一个虚拟的。现在开始工作了。请注意，我已将其硬编码为仅搜索
canad
谢谢。我无法选择行，也无法查看数据，web api返回数据，当我键入几个字符时，文本框向下加载带有数据列表的弹出窗口（我只能查看行，不能查看实际数据），有什么想法吗？
I used this pattern & it worked.

 $("#autocomplete-1")
                .autocomplete({
                    source: "MyMethodURL",
                    minLength: 2,
                    select: function(event, ui) {
                        $("#autocomplete-1").val(ui.item.Name);
                        return false;
                    }
                })
                .data("ui-autocomplete")._renderItem = function(ul, item) {
                    var inner_html = '<table><tr><td>' + item.Name + '</td></tr></table>';
                    return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append(inner_html)
                        .appendTo(ul);
                };
        })(jQuery);