Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89

NHẬN THIẾT KẾ WEBSITE/ SOFTWARE - LÀM ĐỒ ÁN TỐT NGHIỆP, ĐỒ ÁN CHUYÊN MÔN NGÀNH CÔNG NGHỆ THÔNG TIN


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

1 Bootstrap autocomplete trong ASP.NET MVC on Sun Jul 05, 2015 9:18 pm

Admin

avatar

Admin
Admin
Loading

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$(document).ready(function () {

var items = [

"Pencil",

"Pen",

"Ruler",

"Computer",

"Cutter",

"Cleaner",

"Mouse",

"Keyboard",

"Book"

];

 

var option = {

source: items

};

 

$('#search').typeahead(option);

});


view raw typeahead.js hosted with ❤ by GitHub
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



http://phantienquang.blogspot.com/2014/10/bootstrap-autocomplete-trong-aspnet-mvc.html


_________________
Có nỗi buồn triền miên, làm trái tim hoá đá
Có những dòng lệ nhỏ, khiến đá hoá thành tim.

-------------------------------------------------------------------------------------------------------
Program Skills:  ASP.Net MVC 3/4; C#; VB.Net/ VB 6.0; Java Applet/Swing; JS/JavaScript; Bootstrap/ AngularJS; HTML/CSS; Turbo C/ Turbo C++; Pascal...
Xem mẫu Phần mêm quản lý ở đây     -           Xem mẫu Bán hàng trực tuyến ở đây
Nguyễn Ích Hoàn
new_life02081989@yahoo.com
nguyenichhoan1989@gmail.com
Xem lý lịch thành viên http://khoanglang89.forumvi.com

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Bài viết mới cùng chuyên mục

    Bài viết liên quan vớiBootstrap autocomplete trong ASP.NET MVC

      Permissions in this forum:
      Bạn không có quyền trả lời bài viết