Bootstrap autocomplete trong ASP.NET MVC

Nếu bạn vẫn chưa thỏa mãn với jQuery autocomplete, bạn có thể sẽ hài lòng với Bootstrap autocomplete (typeahead). Tuy nhiên typeahead chỉ tồn tại ở phiên bản 2.3.2 của bootstrap, ở 3.2.0 thì không còn nữa (!!!)

Tham khảo bootstrap typeahead

Project

Mình sẽ tạo 1 project ASP.NET MVC 5 (MVC5) để demo typeahead. Sau khi tạo project, download typeahead về và thêm vào trong project. Bạn có thể download typeahead tại đây: download typeahead

Thêm typeahead vào project

Tạo 1 Controller

Tạo Controller và View gồm 1 textbox

Kết quả hiển thị

Với chỉ một đoạn script đơn giản sau đây, bạn đã có bootstrap autocomplete tuyệt đẹp

Kết quả

Typeahead với Action

Trên đây là những trường hợp đơn giản khi bạn set source cho typeahead ngay trong javascript. Đối với những trường hợp cần lấy dữ liệu từ database thì sao? Option source của typeahead có thể là 1 mảng, cũng có thể là 1 function. Do đó, ta có thể sử dụng ajax để lấy dữ liệu trả về từ Action để set source cho typeahead.

Giả sử Action GetSource trả về dạng json như sau:

Và typeahead sẽ gọi Action GetSource thông qua ajax

function nhận 2 tham số là query và process. Query là giá trị lấy được từ textbox, process là hàm callback để set source cho typeahead. Kết quả hoàn toàn tương tự:

Kết

Bạn có thể tham khảo typeahead để tự viết các option khác cho mình. Hy vọng qua thủ thuật này bạn sẽ có thêm 1 sự lựa chọn cho project của bản thân mình.

Twitter bootstrap typeahead and ASP.NET MVC - Key/Value pairs