Sử dụng jQuery Autocomplete

Hôm nay góc Kinh Nghiệm sẽ hướng dẫn các bạn cách sử dụng jQuery Autocomplete.
Ở demo này, Góc Kinh Nghiệm sử dụng Visual Studio 2010, ASP.Net MVC 3 và Razor View Engine

Hình: jQuery Autocomplete

  • Bước 1: tải jquery-1.6.4.min.jsjquery-ui-1.8.11.min.js về và khai báo như sau:
<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
  • Bước 2: khai báo TextBox có name & id là “languages”
@Html.TextBox("languages")
  • Bước 3: gán sự kiện autocomplete vào TextBox có id là “languages”
var listLanguages = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $("#languages" ).autocomplete({
            source: listLanguages
        });

Code hoàn chỉnh như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
</head>
<body>
    <div>
        @Html.TextBox("languages")
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
            var listLanguages = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $("#languages" ).autocomplete({
            source: listLanguages
        });
    });
</script>

Kết quả khi chạy chương trình như hình bên trên
Góc Kinh Nghiệm chúc các bạn thành công! :razz:


Leave a Reply

Your email address will not be published. Required fields are marked *