jquery ui autocomplete MVC
阿新 • • 發佈:2021-06-18
後端:
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="[email protected]"}, new UserAccount { UserId = 2, Name = "Kate2", Telephone = "12345", Email = "[email protected]" }, new UserAccount {UserId=3,Name="Kate3",Telephone="123456",Email="[email protected]"}, new UserAccount { UserId = 4, Name = "Kate4", Telephone = "1234567", Email = "[email protected]" }, new UserAccount {UserId=5,Name="Kate5",Telephone="12345678",Email="[email protected]"}, new UserAccount { UserId = 6, Name = "Kate6", Telephone = "123456789", Email = "[email protected]" }, new UserAccount {UserId=7,Name="Kate7",Telephone="1234567890",Email="[email protected]"}, new UserAccount { UserId = 8, Name = "Kate8", Telephone = "12345678901", Email = "[email protected]" } }; return users; } private List<UserAccount> GetData2() { List<UserAccount> users = new List<UserAccount>(){ new UserAccount {UserId=1,Name="Lina1",Telephone="1234",Email="[email protected]"}, new UserAccount { UserId = 2, Name = "Lina2", Telephone = "12345", Email = "[email protected]" }, new UserAccount {UserId=3,Name="Lina3",Telephone="123456",Email="[email protected]"}, new UserAccount { UserId = 4, Name = "Lina4", Telephone = "1234567", Email = "[email protected]" }, new UserAccount {UserId=5,Name="Lina5",Telephone="12345678",Email="[email protected]"}, new UserAccount { UserId = 6, Name = "Lina6", Telephone = "123456789", Email = "[email protected]" }, new UserAccount {UserId=7,Name="Lina7",Telephone="1234567890",Email="[email protected]"}, new UserAccount { UserId = 8, Name = "Lina8", Telephone = "12345678901", Email = "[email protected]" } }; 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>