jquery ui autocomplete MVC

后端：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace _2021DemoSite.Controllers
{
    public class AutoCompleteDemoController : Controller
    {
        private List<UserAccount> GetData()
        {
            List<UserAccount> users = new List<UserAccount>(){
                new UserAccount {UserId=1,Name="Kate1",Telephone="1234",Email="a@b.com"},
                new UserAccount { UserId = 2, Name = "Kate2", Telephone = "12345", Email = "c@d.com" },
                  new UserAccount {UserId=3,Name="Kate3",Telephone="123456",Email="e@bf.com"},
                new UserAccount { UserId = 4, Name = "Kate4", Telephone = "1234567", Email = "c@b.com" },
                  new UserAccount {UserId=5,Name="Kate5",Telephone="12345678",Email="c@b.com"},
                new UserAccount { UserId = 6, Name = "Kate6", Telephone = "123456789", Email = "c@b.com" },
                  new UserAccount {UserId=7,Name="Kate7",Telephone="1234567890",Email="c@b.com"},
                new UserAccount { UserId = 8, Name = "Kate8", Telephone = "12345678901", Email = "c@b.com" }
            };
            return users;
        }
 
        private List<UserAccount> GetData2()
        {
            List<UserAccount> users = new List<UserAccount>(){
                new UserAccount {UserId=1,Name="Lina1",Telephone="1234",Email="a@b.com"},
                new UserAccount { UserId = 2, Name = "Lina2", Telephone = "12345", Email = "c@d.com" },
                  new UserAccount {UserId=3,Name="Lina3",Telephone="123456",Email="e@bf.com"},
                new UserAccount { UserId = 4, Name = "Lina4", Telephone = "1234567", Email = "c@b.com" },
                  new UserAccount {UserId=5,Name="Lina5",Telephone="12345678",Email="c@b.com"},
                new UserAccount { UserId = 6, Name = "Lina6", Telephone = "123456789", Email = "c@b.com" },
                  new UserAccount {UserId=7,Name="Lina7",Telephone="1234567890",Email="c@b.com"},
                new UserAccount { UserId = 8, Name = "Lina8", Telephone = "12345678901", Email = "c@b.com" }
            };
            return users;
        }
 
        // GET: AutoCompleteDemo
        public ActionResult Index()
        {
            return View();
        }
 
        public ActionResult SearchAccountContact(string key)
        {
            var data = GetData();
            var finalData = data.Where(s => s.Name.Contains(key)).Take(5).Select(
                r => new
                {
                    value = r.UserId,
                    label = r.Name,
                    phone = r.Telephone,
                    email = r.Email
                }).ToArray();
            return Json(finalData, JsonRequestBehavior.AllowGet);
        }
 
        public ActionResult SearchAccountContact2(string key)
        {
            var data = GetData2();
            var finalData = data.Where(s => s.Name.Contains(key)).Take(5).Select(
                r => new
                {
                    value = r.UserId,
                    label = r.Name,
                    phone = r.Telephone,
                    email = r.Email
                }).ToArray();
            return Json(finalData, JsonRequestBehavior.AllowGet);
        }
    }
 
    public class UserAccount
    {
        public int UserId { get; set; }
        public string Name { get; set; }
        public string Telephone { get; set; }
        public string Email { get; set; }
    }
}

　　前端：

@{
    ViewBag.Title = "Index";
    Layout = null;
}

<link href="~/Content/jquery-ui.css" rel="stylesheet" />
@*<script src="~/Scripts/jquery-3.4.1.js"></script>*@
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>

<input id="name" type="text" placeholder=""> //使用者輸名子時啟動自動完成配對
<input id="id" type="text" placeholder="">
<input id="phone" type="text" placeholder="">
<input id="email" type="text" placeholder="">

<input type="checkbox" id="chkTest" />Check

<script>
    //var availableTags = [
    //    "ActionScript",
    //    "AppleScript",
    //    "Asp",
    //    "BASIC",
    //    "C",
    //    "C++",
    //    "Clojure",
    //    "COBOL",
    //    "ColdFusion",
    //    "Erlang",
    //    "Fortran",
    //    "Groovy",
    //    "Haskell",
    //    "Java",
    //    "JavaScript",
    //    "Lisp",
    //    "Perl",
    //    "PHP",
    //    "Python",
    //    "Ruby",
    //    "Scala",
    //    "Scheme"
    //];
    //$("#name").autocomplete({
    //    source: availableTags
    //});
    debugger;
   $("#name").autocomplete({
       
        minLength: 0,
        source: function (request, response) {
            debugger;
            $.ajax({
                url: '/AutoCompleteDemo/SearchAccountContact',
                type: "Get",
                dataType: "json",
                data: {
                    key: request.term//传到后台的参数
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        this.console.log(item);
                        return {
                            label: item.label,
                            value: item.value,
                            phone: item.phone,
                            email: item.email
                        }
                    }));
                }
            });
        },
        //focus参数事件介绍：在下拉选项匹配时如果鼠标有焦点到某个选项，就会把名字带入#name输入框中
        //focus: function (event, ui) {
        //    $("#name").val(ui.item.label);
        //    return false;
        //},
        //select参数事件介绍：使用者选择下拉式项目后触发事件（点击），自动将所有的值带入输入框中
        select: function (event, ui) {
            $("#id").val(ui.item.value);
            $("#phone").val(ui.item.phone);
            $("#email").val(ui.item.email);
            return false;
        }
    });

    $("#chkTest").click(function () {
        debugger;
        $("#name").autocomplete({

            minLength: 0,
            source: function (request, response) {
                debugger;
                $.ajax({
                    url: '/AutoCompleteDemo/SearchAccountContact2',
                    type: "Get",
                    dataType: "json",
                    data: {
                        key: request.term//传到后台的参数
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            this.console.log(item);
                            return {
                                label: item.label,
                                value: item.value,
                                phone: item.phone,
                                email: item.email
                            }
                        }));
                    }
                });
            },
            //focus参数事件介绍：在下拉选项匹配时如果鼠标有焦点到某个选项，就会把名字带入#name输入框中
            //focus: function (event, ui) {
            //    $("#name").val(ui.item.label);
            //    return false;
            //},
            //select参数事件介绍：使用者选择下拉式项目后触发事件（点击），自动将所有的值带入输入框中
            select: function (event, ui) {
                $("#id").val(ui.item.value);
                $("#phone").val(ui.item.phone);
                $("#email").val(ui.item.email);
                return false;
            }
        });

        $("#name").autocomplete("search", "5");
    });

   
</script>