Cách tạo autocomplete với jquery ui

Đầu tiên ta cần download jquery ui và jquery về. Các bạn vào những link sau để download về nhé : http://jquery.com/ http://jqueryui.com/
Tiếp theo ta cấu hình để chạy jquery ui.
hinh 1
Cấu hình để load jquery trong file *.html như sau:
Autocomplete thì có nhiều dạng. Nhưng nhìn chung có 2 dạng chính là local và remote.
Để load local ta làm như sau :

$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

Khi load local thì dữ liệu ta được lưu vào biến availableTags. Khi người dùng gõ bất cứ gì, nếu từ khóa đó tồn tại trong biến availableTags thì kq sẽ được hiện ra:
hinh 2
Để load remote trước tiên ta cần khai báo trong file remote.html như sau :

$(function() {
    $( "#tags" ).autocomplete({
    	source: "search.php",
    });
});

Vậy đó, file source sẽ nằm bên ngoài, nó sẽ nằm trong file có name là search.php . File này phải được cấu trúc theo dạng JSON => File search.php của ta sẽ có dữ liệu như sau :

[
    {"value":"Visual basic"},
    {"value":"C#"},
    {"value":"Java"},
    {"value":"C++"}
]

hinh 3
Lưu ý: Trong trường hợp muốn kết quả trả về chính xác (remote) thì ta dùng php để get dữ liệu. Và xuất ra giá trị đúng chứ jquery ui không hỗ trợ cho việc xuất ra giá trị đúng. Mình đã test và thấy jquery show ra tất cả giá trị, chứ không show đúng như local => Nếu dữ liệu ít thì local là lựa chọn phù hợp và nhanh, còn dữ liệu nhiều, phức tạp thì chắc chắn ta phải chọn remote.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s