Tạo AutoComplete TextBox trong ASP.NET MVC 5

Bài viết này hướng dẫn bạn tạo chức năng AutoComplete (gợi ý từ khóa search) trên textbox trong ASP.NET MVC 5 bằng cách dùng thư viện jQuery UI.

Hình minh họa

Ở hướng dẫn này mình demo bằng cách gợi ý danh sách thành phố (City) khi người dùng nhập tên thành phố vào ô textbox. Bạn làm tương tự với dữ liệu khác nhé.

Bắt đầu nào ^^

Bước 1: Tạo 1 project MVC Application và đặt tên là AutoCompleteInMVCJson.

Bước 2: Tạo class City.cs trong thư mục Models, nội dung như sau:

1. public class City  
2.   {  
3.       public int Id { get; set; }  
4.       public string Name { get; set; }  
5.   
6.   }  

Bước 3: Mở HomeController.cs và định nghĩa thêm 1 action method đặt tên là AutoCompleteCity như sau:

1. using System.Collections.Generic;  
2. using System.Linq;  
3. using System.Web.Mvc;  
4. using AutoCompleteInMVCJson.Models;   
5. namespace AutoCompleteInMVCJson.Controllers  
6. {  
7.     public class HomeController : Controller  
8.     {  
9.         // GET: Home  
10.         [HttpGet]  
11.         public ActionResult Index()  
12.         {  
13.             return View();  
14.         }  
15.         [HttpPost]  
16.         public JsonResult AutoCompleteCity(string Prefix)  
17.         {  
18.             //Note : you can bind same list from database  
19.             List<City> ObjList = new List<City>()  
20.             {  
21.   
22.                 new City {Id=1,Name="Latur" },  
23.                 new City {Id=2,Name="Mumbai" },  
24.                 new City {Id=3,Name="Pune" },  
25.                 new City {Id=4,Name="Delhi" },  
26.                 new City {Id=5,Name="Dehradun" },  
27.                 new City {Id=6,Name="Noida" },  
28.                 new City {Id=7,Name="New Delhi" }  
29.   
30.         };  
31.             //Searching records from list using LINQ query  
32.             var CityName = (from N in ObjList  
33.                             where N.Name.StartsWith(Prefix)  
34.                           select new { N.Name });  
35.             return Json(CityName, JsonRequestBehavior.AllowGet);  
36.         }  
37.     }  

1. }  

Đoạn lệnh trong action AutoCompleteCity thực hiện lấy danh sách City có Name bắt đầu bằng chuỗi Prefix lấy ra từ tham số. Giá trị của chuỗi Prefix chính là chuỗi người dùng nhập ở textbox. 

Sau khi lọc các City thỏa điều kiện thì chúng ta gán qua biến CityName là 1 danh sách các Name của các City thỏa điều kiện. Cuối cùng là trả về  kết quả dưới dạng Json. 

Lưu ý: tên tham số phải là Prefix, điều này là bắt buộc bạn không được đặt tên khác.

Bước 4: Khai báo thư viện jQuery và jQuery UI trong view _Layout.cshtml của bạn như dưới

1. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
2. <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
3. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  

Bước 5: Đặt ID của textbox của bạn 1 tên bất kỳ. Ở bài viết này mình đặt là CityName.

<input type="textbox" name="CityName" id="CityName" />

Bước 6: Dán đoạn lệnh sau vào dưới lệnh khai báo ở bước 4

1. <script type="text/javascript">  
2.     $(document).ready(function () {  
3.         $("#CityName").autocomplete({  
4.             source: function (request, response) {  
5.                 $.ajax({  
6.                     url: "/Home/AutoCompleteCity",  
7.                     type: "POST",  
8.                     dataType: "json",  
9.                     data: { Prefix: request.term },  
10.                     success: function (data) {  
11.                         response($.map(data, function (item) {  
12.                             return { label: item.Name, value: item.Name };  
13.                         }))  
14.   
15.                     }  
16.                 })  
17.             },  
18.             messages: {  
19.                 noResults: "", results: ""  
20.             }  
21.         });  
22.     })  
23. </script>  

Xong. Bạn thử build website và nhập ký tự l vào textbox thì sẽ nhận được kết quả như hình dưới là thành công

Cài đặt autocomplete thành công cho textbox CityName

Mọi thắc mắc bạn comment dưới bài viết để mình giải đáp nhé.